前端项目优化自查
内容提要
前端性能优化包括网络、渲染和运行三方面。加载优化：使用缓存、CDN、gzip、HTTP2，减少请求，善用defer/async和preload。打包优化：代码拆分、tree-shaking、图片压缩与懒加载。运行优化：减少DOM操作与重排重绘，使用防抖节流、Web Worker和requestAnimationFrame。通过Lighthouse检测，并考虑极速版与功能开关。
延伸解读
HTTP/2 对传统优化策略的影响
文章指出，启用 HTTP/2 后，域名分片、雪碧图、base64 内嵌和代码合包等传统减少请求数的手段不再必要，因为 HTTP/2 支持并行下载资源，分开小文件反而能更早下载完成并使用。这意味着在 HTTP/2 环境下，应重新评估这些优化措施，避免过度合并导致缓存粒度变粗和首屏加载延迟。
defer 与 async 的适用场景
文章解释，defer 脚本在下载时不阻塞 HTML 解析，下载完成后等待文档解析完成再按顺序执行，适合依赖完整 DOM 或需要控制执行顺序的脚本；async 脚本下载完成后立即执行，不保证顺序，适合广告、统计等独立功能。正确选择可避免脚本阻塞渲染，提升页面加载性能。
长任务拆分与 requestAnimationFrame
由于渲染和脚本运行互斥，长时间运行的脚本会导致页面卡顿。文章建议将大型任务拆分成多个可在 16.7 毫秒内完成的小任务，并使用 requestAnimationFrame 调度执行，以保证页面流畅。也可考虑使用 Web Worker，但需注意数据通信可能不便。
极速版与功能开关的稳定性价值
文章提出，制作极速版可验证用户对精简功能的需求，若极速版用户明显更多，原版可考虑取消不常用功能。通过环境变量或后台开关控制功能启用，能在新功能出现致命问题时快速关闭，或根据环境与时机关闭高消耗功能，同时结合埋点淘汰低使用率功能，从而提升产品稳定性。
Q&A
前端性能优化主要涉及哪些方面？
前端性能优化主要涉及网络、渲染和运行三个方面。
如何优化前端加载性能？
加载优化包括：使用HTTP缓存、CDN、gzip/Brotli压缩；减少请求数（如base64内嵌图片、iconfont、代码合并）；使用defer/async和preload；启用HTTP2（此时域名分片、雪碧图等不再必要）。
打包优化有哪些常用手段？
打包优化手段包括：代码拆分（延后加载非必要代码）、调整webpack配置压缩合并代码、tree-shaking与scope hoisting、抽离关键代码用于首屏渲染、压缩图片、懒加载。
运行阶段如何优化JavaScript性能？
运行优化包括：减少DOM操作与重排重绘、使用事件委托、防抖节流、避免内存泄漏、SSR；将大型任务拆分成16.7ms内的小任务并用requestAnimationFrame执行，或使用Web Worker；懒加载重型组件（IntersectionObserver）。
如何检测前端性能？
可以使用Lighthouse、dev-tools performance、webpagetest等工具进行性能检测。
什么是极速版和功能开关？
极速版是简化版本，可通过环境变量（如process.env.NODE_ENV）筛选大型逻辑；功能开关是通过后台配置控制前端功能启用，便于快速关闭问题功能或淘汰低使用率功能。
