性能优化知识体系概览
什么是前端性能优化？
前端性能优化是通过各种技术手段，让网页加载更快、交互更流畅、资源消耗更少的实践。它直接影响用户体验和商业转化——据 Google 统计，页面加载时间每增加 1 秒，转化率就下降 20%；超过 3 秒未加载的页面，53% 的用户会直接离开。
性能优化不是"做完功能再优化"的附加工作，而是应该贯穿整个开发过程的意识。面试中，性能优化是考察实战能力最直接的方向——它需要你理解浏览器渲染原理、网络协议、构建工具等多个领域的知识。
面试速答版
什么是前端性能优化？衡量标准是什么？ 性能优化是用各种手段让页面加载更快、交互更顺、占用更少——直接影响转化率和留存：
- 衡量标准要先报 Google 的 Core Web Vitals 三件套：
LCP ≤ 2.5s（最大内容多久画出来）、INP ≤ 200ms（点一下到下一帧的延迟，2024 年取代了 FID）、CLS ≤ 0.1（页面跳来跳去的程度）。 - 辅助看
FCP（首次内容绘制）、TTFB（首字节）、TTI（可交互），这几个能帮你定位是网络慢、解析慢还是 JS 阻塞。 - 别只丢指标，要说自己怎么用
web-vitals库采集，然后按 P75 看大盘。
性能优化通常从哪几个方向入手？ 围绕加载、运行时、架构三层来讲：
- 加载层：首屏关键路径优化（关键 CSS 内联、
preload/prefetch）、图片用 WebP/AVIF + 懒加载、打包做 Tree Shaking 和代码分割。 - 运行时层：减重排重绘、长列表用虚拟滚动、避免内存泄漏（定时器/事件/闭包）。
- 架构层：用 SSR/SSG 让首屏直出 HTML、配 Lighthouse CI 守门、设性能预算超阈值就报警。
如何衡量"性能好不好"？
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 → 架构级优化与度量