Performance_Optimization 面试专题手册
💡 本章节共收录 1715 道面试真题，建议每天复习 10-20 题。
Q1: 项目中做代码分割、按需加载的原因是什么？代码分割是否越细越好，判断标准是什么？
【核心解析】 减少首屏加载体积；按需加载提升性能；过细分割导致请求过多；判断标准：模块复用率、体积阈值、加载时机
Q2: 请描述虚拟滚动列表的实现思路及其性能优势。
【核心解析】 只渲染可视区域元素；计算总高度占位；监听滚动事件动态更新渲染区间；使用绝对定位或transform偏移；减少DOM节点数，提升长列表性能
Q3: 长列表渲染卡顿如何优化？请介绍虚拟列表及其他方案。
【核心解析】 虚拟列表原理：只渲染可视区域；分页请求；时间分片；requestAnimationFrame；使用Fragment减少DOM操作
Q4: 如何用性能工具排查性能问题？非DOM问题如何排查和优化？
【核心解析】 Chrome DevTools Performance面板；测量脚本运行时间；使用memo缓存；Web Worker多线程；WebAssembly优化计算密集型任务
Q5: 用户反馈白屏时间过长，如何优化？SSR在什么场景下使用？为什么SSR比CSR快？如何进一步优化SSR性能？
【核心解析】 代码分割、懒加载；SSR减少首屏JS体积；SSR适用于首屏性能敏感、SEO需求；SSR比CSR快因为直接返回HTML；进一步优化：流式渲染、缓存、预加载
Q6: 解释懒加载的原理、实现方式以及为什么需要懒加载？
【核心解析】 延迟加载非首屏资源；减少首屏加载时间；IntersectionObserver监听；动态import；图片懒加载；代码分割
Q7: 如何实现一个虚拟列表组件？请说明其原理和关键实现。
【核心解析】 只渲染可视区域；计算滚动偏移；动态高度处理；缓存机制；IntersectionObserver或滚动监听
Q8: 如何实现图片懒加载？请说明原理和实现方式。
【核心解析】 data-src属性；IntersectionObserver；滚动监听；占位图；加载时机
Q9: 上线虚拟滚动后，如何监控其是否按预期实现？
【核心解析】 检查滚动条高度与实际内容匹配；验证可视区域渲染元素数量；使用Performance API测量渲染帧率；监听滚动事件确认元素复用；对比内存占用
Q10: BlurHash图片占位是如何实现的？具体如何用Canvas组件使用hash摘要？
【核心解析】 BlurHash将图片编码为短字符串；解码生成模糊占位图；使用Canvas绘制像素数据；通过hash摘要还原近似颜色分布
Q11: 频繁点击导致页面频繁更新，如何优化？
【核心解析】 防抖（debounce）或节流（throttle）；使用React的useMemo或useCallback减少重渲染；使用requestAnimationFrame；设置加载状态防止重复请求
Q12: 请解释前端性能监控的实现方式，包括自己实现和调用第三方库的优缺点。
【核心解析】 Performance API；Resource Timing；错误监控；用户行为追踪；第三方库如Sentry；自定义埋点；上报策略
Q13: 请解释埋点的意义及常见实现方式。
【核心解析】 数据驱动决策；用户行为分析；PV/UV统计；事件埋点；无痕埋点；后端日志
Q14: 项目中遇到的性能问题有哪些？如何优化弱网环境下的网络请求？
【核心解析】 请求合并与缓存；CDN加速；数据压缩（Gzip/Brotli）；预加载与预连接；离线缓存（Service Worker）
Q15: 如何排查和解决内存泄漏？
【核心解析】 Chrome DevTools Memory面板；堆快照对比；闭包导致泄漏；DOM引用未清除；定时器与事件监听未清理
Q16: 无限层级文件夹管理的懒加载是纯前端渲染控制，还是结合后端接口？
【核心解析】 前端虚拟滚动与按需渲染；后端分页接口；数据预取策略；展开时动态加载；缓存已加载数据
Q17: 如何实现一个高性能的虚拟列表（Virtual List）？请说明其原理和关键实现细节。
【核心解析】 虚拟列表原理：只渲染可视区域内的DOM；动态行高计算；滚动位置保持；数据预加载；与react-window等库的对比
Q18: 请分析React应用性能优化的常见手段，包括代码分割、懒加载、memo等。
【核心解析】 React.lazy与Suspense实现代码分割；React.memo、useMemo、useCallback减少不必要的渲染；虚拟列表优化长列表；性能分析工具（React DevTools、Performance API）
Q19: 请解释SSR（服务端渲染）的原理及其优缺点，并对比SSG、ISR等类似技术。
【核心解析】 SSR原理：在服务端生成HTML发送给客户端；优点：首屏加载快、SEO友好；缺点：服务器压力大、TTFB较长；SSG：构建时生成静态HTML；ISR：增量静态再生；适用场景
Q20: 了解哪些前端监控手段？请列举并说明原理。
【核心解析】 性能监控：Performance API、Lighthouse；错误监控：window.onerror、try-catch；用户行为监控：埋点、PV/UV；资源加载监控：Resource Timing；监控平台：Sentry、自研
Q21: 提升首屏加载速度的方法有哪些？
【核心解析】 代码分割与懒加载；资源压缩与CDN；预加载关键资源；服务端渲染；缓存策略
Q22: Element UI中哪些组件支持懒加载？如何使用？
【核心解析】 Tree组件：lazy属性，load方法；Table组件：虚拟滚动（vxe-table等）；Select组件：远程搜索；Cascader组件：动态加载；Image组件：懒加载
Q23: 大图或大量计算如何避免阻塞主线程？
【核心解析】 Web Worker处理计算；WebAssembly加速；图片懒加载；分片处理；requestIdleCallback
Q24: 全局异常捕获与上报的设计思路（框架解耦的通用SDK设计）。
【核心解析】 window.onerror和unhandledrejection；封装SDK；收集错误信息（堆栈、URL、用户行为）；上报策略（批量、采样）；去重
Q25: 请解释Lighthouse的评分指标，并针对每一项提出优化方案？
【核心解析】 FCP（首次内容绘制）：优化关键渲染路径；LCP（最大内容绘制）：优化图片和字体加载；TBT（总阻塞时间）：减少长任务；CLS（累计布局偏移）：设置图片尺寸；SI（速度指数）：优化首屏加载
Q26: 介绍埋点中的Web性能指标（FP/FCP/LCP/INP/CLS）的详细含义。
【核心解析】 FP首次绘制；FCP首次内容绘制；LCP最大内容绘制；INP交互到下次绘制；CLS累计布局偏移
Q27: SEO怎么做？如何评估SEO？
【核心解析】 语义化HTML；meta标签；SSR/SSG；sitemap；结构化数据；页面速度；移动适配；使用工具如Lighthouse
Q28: 请详细说明前端支付场景下的性能优化、安全防护和可靠性保障方案。
【核心解析】 预加载支付SDK；使用CDN加速；HTTPS与CSP安全策略；输入验证与防重放攻击；支付失败重试与超时处理；降级方案设计；防止重复支付的机制
Q29: 主要观测的性能指标有哪些？LCP是怎么计算的？具体LCP数值是多少？
【核心解析】 指标：LCP、FID、CLS、TTFB、FCP；LCP计算：最大内容绘制时间，包括图片、视频、文本等；良好LCP应小于2.5秒
Q30: 性能优化做了哪些内容？
【核心解析】 代码分割、懒加载、图片优化、CDN、缓存、减少重排重绘、服务端渲染、预加载、压缩
Q31: 请解释虚拟列表的原理及实现方式。
【核心解析】 只渲染可视区域内的列表项；通过计算滚动偏移和项高度动态更新；减少DOM节点数量，提升性能；常用库：react-window、vue-virtual-scroller
Q32: 如何设计一个上传组件，保证性能和可靠性？大文件上传如何加速？
【核心解析】 分片上传、断点续传、并发控制；使用Web Worker处理文件；进度反馈；大文件加速：分片并行上传、秒传（计算hash）、压缩
Q33: 如何将数据迁移到IndexedDB？与localStorage相比有何优势？
【核心解析】 IndexedDB支持结构化数据；异步操作；大容量存储；索引查询；localStorage仅存储字符串；迁移需逐条写入
Q34: 请解释SSE（Server-Sent Events）和虚拟列表的实现原理。
【核心解析】 SSE单向实时通信；EventSource接口；虚拟列表只渲染可视区域；计算滚动偏移；复用DOM节点；第三方库如react-virtualized
Q35: 前端常用的本地存储方式有哪些？各有什么特点？
【核心解析】 cookie（4KB，自动发送）；localStorage（5MB，持久）；sessionStorage（会话级）；IndexedDB（结构化，大容量）；Web SQL（已废弃）
Q36: 请解释虚拟列表（Virtual List）的实现原理及优化策略。
【核心解析】 固定高度虚拟列表（计算可视区域、滚动偏移、渲染子集）；动态高度（预估高度+二次校正）；优化（缓冲区、DOM回收、IntersectionObserver）；与懒加载的区别
Q37: 请介绍SEO优化的常见策略，以及前端在SEO中可以做哪些工作？
【核心解析】 语义化HTML标签；SSR/SSG生成静态页面；合理的meta标签与结构化数据；优化页面加载速度（LCP）；避免使用客户端渲染导致内容不可见
Q38: 前端性能优化有哪些常见手段？
【核心解析】 代码分割与懒加载；图片优化（懒加载、WebP）；缓存策略；CDN；减少重排重绘；虚拟滚动；预加载/预渲染
Q39: 如何实现虚拟滚动？请解释其原理和关键实现步骤。
【核心解析】 虚拟滚动的核心思想；计算可视区域起始和结束索引；只渲染可视区域内的元素；占位元素维持滚动条高度；IntersectionObserver或scroll事件监听
Q40: 前端开发中有哪些提升效率的方法？
【核心解析】 模块化与组件化；自动化构建工具；代码生成与脚手架；调试技巧（Source Map, React DevTools）；性能监控与优化；团队协作规范
Q41: 前端性能优化实操包括哪些方面？请详细说明防抖节流、懒加载、图片优化、分包等。
【核心解析】 防抖节流减少高频触发；懒加载延迟加载非首屏资源；图片优化（压缩、webp、响应式图片、懒加载）；代码分包（路由懒加载、第三方库分离、动态import）
Q42: 设计一个组件，统计产品卡片曝光（用户看到就算），请说明思路。
【核心解析】 使用IntersectionObserver监听元素可见性；设置阈值threshold；曝光一次后取消观察；考虑防抖/节流；上报曝光数据（可图片打点或接口）
Q43: LCP 是什么？如何判断是否是 LCP？Lighthouse 如何检测？还有哪些性能指标？
【核心解析】 LCP（Largest Contentful Paint）衡量最大内容渲染时间；通过 PerformanceObserver 观察 largest-contentful-paint 条目；Lighthouse 通过模拟加载计算；其他指标：FCP、TTI、TBT、CLS
Q44: 在前端性能优化方面（如骨架屏、加载占位等），是否有过具体的落地实践？请结合项目经验说明优化思路和效果。
【核心解析】 骨架屏实现方案（SSR/插件）；加载占位符（Skeleton/Spinner）；资源压缩与图片优化；渲染优化与首屏优化；性能监控与指标（LCP/FID/CLS）
Q45: 虚拟滚动（Virtual Scrolling）的原理是什么？什么场景下必须使用虚拟滚动？如何设计一个虚拟列表？
【核心解析】 只渲染可视区域元素；计算滚动偏移；动态高度处理；列表项复用；大数据量长列表场景；性能优化（减少DOM节点）
Q46: 前端展示你做了哪些优化？为什么是这个优化顺序（资源压缩->图片优化->渲染优化->首屏优化）？
【核心解析】 资源压缩（JS/CSS/HTML）；图片优化（WebP/懒加载/压缩）；渲染优化（减少重排重绘/虚拟列表）；首屏优化（SSR/预加载/关键CSS）；优化优先级基于收益与成本
Q47: 如何设计虚拟列表？你设计的列表放在哪里？如何优化用户体验？
【核心解析】 虚拟列表实现（固定/动态高度）；可视区域计算；列表项回收与复用；滚动事件优化（requestAnimationFrame）；用户体验：平滑滚动、加载占位、预加载
Q48: 前端性能优化有哪些方法？
【核心解析】 首屏加载优化：代码分割、懒加载、预加载；图片优化：懒加载、WebP、压缩；缓存策略：强缓存、协商缓存、Service Worker；渲染优化：减少重排重绘、虚拟滚动、requestAnimationFrame；网络优化：CDN、HTTP/2、预连接
Q49: 怎么做性能优化的？性能优化的指标有哪些？怎么做性能监控的，性能监控的原理是什么？
【核心解析】 优化指标：FCP、LCP、CLS、TTI、TBT；优化手段：代码分割、懒加载、缓存、CDN、SSR；性能监控：Performance API、Lighthouse、Web Vitals、错误监控（Sentry）
Q50: 用户反馈白屏如何排查？输入URL到页面加载的过程是怎样的？页面加载的相关事件有哪些？
【核心解析】 白屏排查：检查网络请求、JS错误、资源阻塞、DOM解析；加载过程：DNS解析、TCP连接、HTTP请求、HTML解析、CSSOM构建、渲染树、布局、绘制；事件：DOMContentLoaded、load、beforeunload
Q51: 对于长列表，除了虚拟列表还有什么优化手段？
【核心解析】 分页加载、时间分片、懒加载、使用Fragment减少DOM节点、CSS containment、Web Worker处理数据
Q52: 如何保证页面动画的流畅性？
【核心解析】 使用requestAnimationFrame代替setTimeout；避免重排重绘，使用transform和opacity；开启GPU加速（will-change）；减少JS执行时间；使用CSS动画代替JS动画；考虑帧率监控
Q53: 表格相关的性能优化有哪些？包括缓存、首屏监控、虚拟表格、选型等。
【核心解析】 表格缓存：内存/本地存储缓存数据、滚动位置、筛选状态；首屏监控：Performance API监听FP/FCP/LCP；虚拟表格：只渲染可视区DOM，用占位撑开高度；选型：简单用原生，复杂用AntD/AgGrid
Q54: 你们项目是如何进行性能监控的？
【核心解析】 使用Performance API采集FP/FCP/LCP等指标；错误监控（window.onerror）；资源加载监控；自定义埋点；上报到监控平台；使用Sentry/自建
Q55: 如何设计骨架屏预加载、视口懒加载和错误自动兜底方案？
【核心解析】 骨架屏：使用CSS或SVG模拟页面结构，在数据加载前展示；视口懒加载：利用IntersectionObserver或滚动事件，仅加载可见区域内容；错误兜底：设置fallback组件或图片，捕获加载错误并显示替代内容；三者结合提升用户体验和性能
Q56: 反向代理如何处理静态资源缓存？其工作方式和优势是什么？
【核心解析】 缓存策略（设置Cache-Control、Expires）；CDN结合；减少后端请求、加速资源加载；降低服务器负载
Q57: 如何实现图片懒加载？如何监测图片进入视口？如何保证视口内图片优先加载？
【核心解析】 IntersectionObserver API；data-src属性；防抖节流优化；优先加载（设置loading='lazy'、预加载视口附近图片）
Q58: 页面加载时间长如何排查和优化？请列举具体措施。
【核心解析】 排查（Chrome DevTools Network/Performance面板、Lighthouse）；优化（压缩JS/CSS/图片、代码分割、延迟加载、CDN、SSR、雪碧图、合并请求、ES Modules）
Q59: 如果AI服务使用SSE（Server-Sent Events）实现，高并发下如何优化响应速度？
【核心解析】 负载均衡；缓存常用响应；异步处理；连接池；压缩数据；CDN边缘计算
Q60: CSS压缩的实现原理和规则是什么？
【核心解析】 删除空格、注释、换行；缩短颜色值、合并选择器；使用CSSnano等工具；规则（保持语义等价、避免破坏样式）
Q61: 针对requestAnimationFrame，设计一个检测卡顿的方案，上报的内容应该包含什么？
【核心解析】 记录每帧时间戳；计算帧间隔；判断是否超过阈值（如50ms）；上报内容：卡顿时间、持续时间、帧率、页面URL、用户操作上下文；使用PerformanceObserver
Q62: 虚拟滚动中，如果消息项高度不固定，你是怎么处理的？
【核心解析】 预估高度+动态调整；使用ResizeObserver监听尺寸变化；缓存已渲染项的实际高度；二分查找定位滚动位置；参考react-virtualized的CellMeasurer
Q63: 如何确保只更新更改的文件的文档？
【核心解析】 文件哈希对比；增量更新策略；使用版本控制（如Git diff）；监听文件变化（如chokidar）；只传输差异部分
Q64: 开发中如何检查内存泄漏？
【核心解析】 使用Chrome DevTools的Memory面板；录制堆快照；分析分离的DOM节点；使用Performance面板观察内存变化
Q65: 在AI应用中，如何优化首屏加载速度，特别是涉及大型WebAssembly模块（如本地向量化模型）时？
【核心解析】 代码分割与懒加载；WebAssembly的异步编译；预加载与预连接；使用Service Worker缓存；渐进式加载与骨架屏
Q66: 前端性能指标LCP、FCP、FP分别代表什么？如何优化这些指标？
【核心解析】 FP（首次绘制，白屏时间）；FCP（首次内容绘制）；LCP（最大内容绘制，加载性能核心指标）；优化方法（减少资源体积、优化关键渲染路径、预加载、CDN等）
Q67: 移动端适配和兼容性处理有哪些常见方案？
【核心解析】 视口设置（viewport）；rem/vw/vh单位；媒体查询；flexible方案；postcss-px-to-viewport；兼容性处理（polyfill、autoprefixer、条件注释）
Q68: 前端监控与错误捕获有哪些方案？如何实现？
【核心解析】 错误捕获（window.onerror、try-catch、Promise异常）；性能监控（Performance API、LCP等指标）；用户行为监控（埋点）；错误上报（Image/Beacon/Ajax）；Source Map定位源码
Q69: 项目中虚拟滚动/懒加载具体是怎么实现的？
【核心解析】 虚拟滚动：只渲染可视区域；计算滚动偏移；动态更新DOM；懒加载：IntersectionObserver；监听元素进入视口；加载图片或组件
Q70: 前端性能优化方案有哪些？如何实现性能监控和上报？
【核心解析】 首屏优化：懒加载、代码分割；资源优化：压缩、缓存；渲染优化：减少重排重绘；Performance API；Web Vitals；错误监控；上报方式：Beacon, Image
Q71: 请解释图片懒加载的原理及实现方式，并说明如何优化图片加载性能？
【核心解析】 懒加载原理（监听滚动或IntersectionObserver）；占位图或低质量预览；src属性动态赋值；图片格式选择（WebP/AVIF）；响应式图片（srcset/sizes）；CDN加速；预加载关键图片
Q72: 请解释虚拟滚动的原理及实现方式，并说明如何优化其性能？
【核心解析】 只渲染可视区域内的列表项；计算总高度占位；监听滚动更新渲染范围；缓存已渲染项；动态高度处理；减少DOM操作；使用requestAnimationFrame
Q73: 为什么CSS动画中推荐使用transform和opacity而不是改变宽高？
【核心解析】 transform和opacity仅触发合成层，不触发重排重绘；改变宽高会触发重排，性能开销大；GPU加速可提升动画流畅度；浏览器合成线程独立处理
Q74: 路由懒加载和骨架屏如何缩短首屏加载时间？骨架屏在何时渲染？如何处理接口快速返回时的骨架屏闪烁？
【核心解析】 路由懒加载按需加载组件代码；骨架屏在数据加载前渲染占位内容；骨架屏在路由切换后立即渲染；接口快速返回时需判断数据是否已到达，避免闪烁；可设置最小加载时间或条件渲染
Q75: 一个H5项目发布了新版本，但用户打开看到的仍是旧版本，如何分析并解决？
【核心解析】 检查浏览器缓存策略（强缓存）；配置服务端Cache-Control为no-cache或max-age=0；使用文件指纹（hash）；通过版本号或时间戳强制刷新；Service Worker更新机制
Q76: SSR（服务端渲染）如何优化SEO排名？
【核心解析】 SSR返回完整HTML，利于搜索引擎爬虫；首屏加载更快；结合预渲染（Prerender）；注意TTFB优化；使用流式渲染
Q77: 前端性能优化有哪些常见方案？请结合SSR举例说明。
【核心解析】 代码分割与懒加载；图片优化（懒加载、WebP）；SSR（服务端渲染）减少首屏白屏；缓存策略；虚拟列表；Tree Shaking
Q78: 白屏问题如何解决？请列举常见原因及优化方案。
【核心解析】 CSS阻塞渲染；JS阻塞解析；首屏加载优化（代码分割、懒加载）；骨架屏；SSR/SSG；关键CSS内联；预加载关键资源
Q79: 虚拟列表的实现原理是什么？
【核心解析】 只渲染可视区域内的DOM元素；计算总高度占位；监听滚动事件动态更新渲染范围；使用绝对定位偏移；减少DOM数量提升性能
Q80: 你在项目中是如何实现性能优化的？请举例说明。
【核心解析】 代码分割与懒加载；图片优化（懒加载、WebP）；缓存策略（HTTP缓存、Service Worker）；减少重排重绘；性能监控（Lighthouse）
Q81: 如何进行 Web 性能监控？如何衡量 LCP（Largest Contentful Paint）的性能是否合适？如果 LCP 太高，如何优化？
【核心解析】 性能监控指标（LCP、FID、CLS等）；使用Performance API与PerformanceObserver；LCP的衡量标准（2.5秒以内为良好）；优化LCP的方法（优化图片加载、预加载关键资源、减少渲染阻塞）；CDN与缓存策略
Q82: 请解释图片懒加载的实现原理，以及在什么情况下加载图片？
【核心解析】 IntersectionObserver监听元素进入视口；设置data-src属性；进入视口时替换src；预加载策略；考虑滚动容器和占位图
Q83: 请谈谈前端性能优化有哪些常见手段？
【核心解析】 代码分割与懒加载；图片优化（压缩、WebP、懒加载）；缓存策略（HTTP缓存、Service Worker）；减少重排重绘；CDN加速；SSR/SSG；Tree Shaking
Q84: 前端监控体系通常包含哪些方面？如何实现？
【核心解析】 错误监控（JS错误、资源加载错误）；性能监控（FP、FCP、LCP等）；用户行为追踪（PV、UV、点击）；数据上报与可视化
Q85: 如何优化页面白屏时间？请列出具体方案。
【核心解析】 首屏加载优化（代码分割、懒加载）；关键渲染路径优化（内联关键CSS、异步加载非关键资源）；SSR/SSG；预加载与预渲染；减少资源体积（压缩、Tree Shaking）
Q86: 首页白屏可能的原因及优化方案？SEO优化有哪些方法？
【核心解析】 白屏原因：资源加载慢、JS阻塞、CSS未加载；优化：SSR、预渲染、代码分割、关键CSS内联；SEO：语义化HTML、meta标签、sitemap、SSR、预渲染
Q87: Web性能优化有哪些常见手段？
【核心解析】 资源压缩与合并；图片优化（WebP、懒加载）；代码分割与Tree Shaking；缓存策略（CDN、Service Worker）；减少重排重绘；SSR/SSG
Q88: 实习公司项目为什么要进行状态管理优化？
【核心解析】 减少不必要的渲染；避免状态冗余；提升可维护性；优化性能（如使用选择器、拆分store）
Q89: 首屏加载慢怎么优化？
【核心解析】 代码分割与懒加载；资源压缩与CDN；图片优化（webp、懒加载）；SSR/SSG；预加载关键资源；减少阻塞渲染的CSS/JS；使用HTTP/2
Q90: 请解释虚拟列表（Virtual List）的原理，如何处理不等高列表项，以及如何实现回到指定位置？
【核心解析】 虚拟列表只渲染可视区域内的DOM，减少节点数；不等高处理：预估高度+动态测量，使用缓存记录实际高度；回到指定位置：通过scrollTo或scrollTop计算偏移量，结合高度缓存；关键数据结构：起始索引、结束索引、偏移量、高度缓存
Q91: 请列举首屏加载优化的常见策略？
【核心解析】 代码分割；懒加载（图片、组件）；预加载（preload/prefetch）；CDN加速；服务端渲染；压缩资源（Gzip、图片压缩）；缓存策略
Q92: 请解释前端性能优化的常见手段，并举例说明你在项目中做过哪些优化？
【核心解析】 减少HTTP请求；资源压缩与合并；使用CDN；缓存策略；懒加载；防抖节流；虚拟滚动；内存泄漏排查；性能监控（Lighthouse、Performance API）
Q93: 如果让你自己实现一个前端错误监控系统，你会如何设计？
【核心解析】 错误捕获（try/catch、window.onerror、unhandledrejection）；错误分类；堆栈解析；上报策略（采样、去重）；可视化平台；告警机制
Q94: 如何发现和定位2GB内存泄漏？请描述排查过程。
【核心解析】 Chrome DevTools Performance面板；Heap Snapshot对比；Allocation Timeline；Retaining Tree分析；代码审查；复现步骤
Q95: 你排查出的主要内存泄漏原因有哪些？请举例说明。
【核心解析】 全局变量未释放；闭包引用；事件监听未移除；定时器未清除；DOM引用；Map/Set未清理
Q96: 除了项目中的问题，你还了解前端常见的其他内存泄漏场景吗？
【核心解析】 循环引用；Web Worker未终止；Observer未断开；缓存未限制；第三方库泄漏；iframe泄漏
Q97: 首屏加载优化有哪些常见策略？
【核心解析】 代码分割与懒加载；资源压缩与Tree Shaking；CDN加速；SSR/SSG；图片优化（WebP、懒加载）；预加载关键资源；减少HTTP请求；使用HTTP/2
Q98: 请解释性能优化方法、如何检测性能优化指标、网络层面的优化方法、INP指标优化。
【核心解析】 性能优化（代码分割、懒加载、缓存、CDN、压缩）；检测指标（Lighthouse、Performance API、Core Web Vitals）；网络优化（HTTP/2、预加载、DNS预解析、减少请求）；INP优化（减少长任务、优化事件处理、使用requestAnimationFrame、Web Workers）
Q99: 请列举前端性能优化的常见手段，包括首屏加载优化、代码分割、图片懒加载、长列表虚拟滚动等。
【核心解析】 首屏优化：SSR、预渲染、CDN、压缩；代码分割：动态import、路由懒加载；图片优化：懒加载、webp、压缩；虚拟滚动：只渲染可视区域；缓存策略
Q100: 如何实现一个曝光埋点（自己实现）？请说明思路。
【核心解析】 监听元素是否进入视口（IntersectionObserver或scroll）；记录曝光次数、时间；上报数据；考虑重复曝光、性能