性能优化知识体系概览
什么是前端性能优化？
前端性能优化是通过产品、架构和工程手段，让网页更早呈现关键内容、更快响应交互、更稳定，并合理使用网络、CPU 和内存的实践。大量行业案例表明性能会影响留存和转化，但具体幅度依赖业务、地区、设备与统计年份；面试或方案中引用商业数字时，应同时给出来源和样本，不能把某个案例当成所有网站的固定规律。
性能优化不是"做完功能再优化"的附加工作，而是应该贯穿整个开发过程的意识。面试中，性能优化是考察实战能力最直接的方向——它需要你理解浏览器渲染原理、网络协议、构建工具等多个领域的知识。
面试速答版
什么是前端性能优化？衡量标准是什么？ 性能优化是用各种手段让页面加载更快、交互更顺、占用更少——直接影响转化率和留存：
- 衡量标准要先报 Google 的 Core Web Vitals 三件套：
LCP ≤ 2.5s（最大内容多久画出来）、INP ≤ 200ms（点一下到下一帧的延迟，2024 年取代了 FID）、CLS ≤ 0.1（页面跳来跳去的程度）。 - 辅助看
FCP（首次内容绘制）、TTFB（首字节）和实验室TBT（总阻塞时间）。TTI主要用于理解旧版报告，当前不再作为核心目标。 - 别只丢指标，要说自己怎么用
web-vitals库采集，然后按 P75 看大盘。
性能优化通常从哪几个方向入手？ 围绕加载、运行时、架构三层来讲：
- 加载层：先看关键路径和资源发现，再选择关键 CSS、资源提示、现代图片格式、代码分割、缓存与 CDN；LCP 图不能懒加载，preload 也不能滥用。
- 运行时层：围绕 INP 三阶段拆长任务、缩小渲染范围，长列表按场景选择虚拟化，并治理内存和第三方脚本。
- 架构层：按页面组合 CSR/SSR/SSG/Streaming，建立 RUM、实验室测试、性能预算和发布回归闭环。
如何衡量"性能好不好"？
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（首字节时间）、实验室 TBT、资源体积、长任务和业务自定义完成时间。单一指标不能构成完整画像。
现场数据与实验室数据要配合
- RUM/CrUX 回答真实用户是否慢，并按页面、版本、设备和网络分群。
- Lighthouse/Performance/WebPageTest 在受控环境复现并解释为什么慢。
- Core Web Vitals 达标口径通常是移动端和桌面端分别看页面访问样本 P75；不要拿开发电脑的一次跑分代表全部用户。
以用户旅程组织性能工作
应保护的不是抽象“页面速度”，而是具体旅程：首次打开、返回访问、路由切换、搜索筛选、提交表单、长列表滚动和长会话。不同旅程使用不同指标与预算。
性能优化的核心方向
加载优化——让页面更快地出现
- 首屏优化：关键渲染路径、LCP 四阶段、选择性资源提示、稳定占位、SSR/Streaming
- 图片优化：使用新一代格式（WebP/AVIF）、懒加载、响应式图片、CDN 图片处理
- 打包优化：Tree Shaking（摇掉无用代码）、代码分割（按需加载）、资源压缩（gzip/brotli）
- 第三方与媒体：第三方脚本按价值和时机分层；音视频根据场景选择渐进下载、HLS/DASH、MSE 与 ABR
运行时优化——让页面更流畅地交互
- 交互优化：拆解 INP 的输入、处理、呈现三阶段，拆分长任务并尽早给出反馈
- 渲染优化：减少无效样式、布局、绘制与合成工作，使用
requestAnimationFrame按时间推进动画 - 内存优化：通过 Retainers 找到不必要的强引用；对象元数据可用 WeakMap，WeakRef 回收时机不确定，只适合少数可重建优化
- 长列表优化：虚拟滚动（只渲染可视区域的元素）、分页加载
- SPA 导航优化：并行准备路由代码与数据，消除请求瀑布，兼顾 BFCache、软导航指标和静态资源版本兼容
架构级优化——从源头解决性能问题
- SSR/SSG/Streaming：让关键内容更早到达，但仍要控制 TTFB、客户端 JS、Hydration 和缓存一致性
- 性能监控：Performance API 采集数据、Sentry/自建 SDK 上报、Lighthouse CI 持续审计
- 性能预算：为 bundle 大小、首屏时间等设定阈值，超出即告警
学习建议
推荐学习路径
- Web Vitals + 性能测试 → 先学会度量、分群和复现
- 网络资源加载 + 首屏优化 → 理解 LCP 与关键路径
- 交互性能 + 渲染优化 → 理解 INP、长任务和浏览器流水线
- 打包、图片、字体、内存 → 优化具体资源与运行成本
- 虚拟列表 + Worker → 解决经过测量确认的特定瓶颈
- SPA 导航 + 第三方 + 音视频 → 覆盖复杂应用和长会话中的专项性能问题
- SSR/SSG + Lighthouse + 性能预算 → 完成架构与治理闭环