性能优化知识体系概览
什么是前端性能优化？
前端性能优化是通过各种技术手段，让网页加载更快、交互更流畅、资源消耗更少的实践。它直接影响用户体验和商业转化——据 Google 统计，页面加载时间每增加 1 秒，转化率就下降 20%；超过 3 秒未加载的页面，53% 的用户会直接离开。
性能优化不是"做完功能再优化"的附加工作，而是应该贯穿整个开发过程的意识。面试中，性能优化是考察实战能力最直接的方向——它需要你理解浏览器渲染原理、网络协议、构建工具等多个领域的知识。
如何衡量"性能好不好"？
Google 提出了 Core Web Vitals（核心网页指标），作为衡量用户体验的标准：
| 指标 | 全称 | 衡量维度 | 良好标准 |
|---|---|---|---|
| LCP | Largest Contentful Paint | 加载速度 | ≤ 2.5s |
| INP | Interaction to Next Paint | 交互响应 | ≤ 200ms |
| CLS | Cumulative Layout Shift | 视觉稳定性 | ≤ 0.1 |
除了 Core Web Vitals，还有FCP（首次内容绘制）、TTFB（首字节时间）、TTI（可交互时间）等指标，构成了完整的性能度量体系。
性能优化的核心方向
加载优化——让页面更快地出现
- 首屏优化：关键渲染路径优化、资源预加载（prefetch/preload）、骨架屏、SSR
- 图片优化：使用新一代格式（WebP/AVIF）、懒加载、响应式图片、CDN 图片处理
- 打包优化：Tree Shaking（摇掉无用代码）、代码分割（按需加载）、资源压缩（gzip/brotli）
运行时优化——让页面更流畅地交互
- 渲染优化：减少重排重绘、使用 GPU 加速、
requestAnimationFrame动画 - 内存优化：避免内存泄漏（闭包、事件监听、定时器）、合理使用 WeakMap/WeakRef
- 长列表优化：虚拟滚动（只渲染可视区域的元素）、分页加载
架构级优化——从源头解决性能问题
- SSR/SSG：服务端渲染让首屏直出 HTML，无需等待 JS 下载和执行
- 性能监控：Performance API 采集数据、Sentry/自建 SDK 上报、Lighthouse CI 持续审计
- 性能预算：为 bundle 大小、首屏时间等设定阈值，超出即告警
学习建议
推荐学习路径
- Web Vitals + 首屏优化 → 理解性能指标和关键优化方向
- 打包优化 + 图片优化 → 最容易出成果的优化手段
- 渲染优化 + 内存优化 → 运行时性能提升
- 虚拟列表 + Worker → 解决特定性能瓶颈
- SSR/SSG + Lighthouse → 架构级优化与度量