性能优化
前端性能优化是中高级前端面试的高频考点，也是工程实践中最具"性价比"的能力之一。一个加载缓慢、交互卡顿的页面，无论功能多丰富，都会在用户打开的几秒内流失掉。Google 的研究表明：页面加载时间从 1s 增加到 3s，跳出率会上升约 32%；而移动端每增加 1s 延迟，转化率会下降约 20%。性能不只是"快"，更是产品体验、留存与营收的直接体现。
在面试场景下，性能优化问题往往不是"背一下指标就行"，而是考察你是否具备从指标 → 现象 → 根因 → 优化方案 → 度量验证的完整闭环思维。能否讲清楚 LCP 为什么慢、长任务出现在哪、为什么列表滚动会卡、为什么页面内存持续上涨，是区分初级与高级候选人的关键。
本章节涵盖
本章节围绕前端性能优化的六大方向展开，覆盖指标、渲染、加载、网络、内存与工具：
| 方向 | 关注点 | 对应文章 |
|---|---|---|
| 指标 | 如何定义"快"？LCP / INP / CLS / TTFB / FCP 都代表什么 | 性能指标与 Core Web Vitals |
| 渲染 | 重排重绘、合成层、虚拟列表、布局抖动 | 渲染性能 |
| 加载 | 代码分割、懒加载、预加载、tree shaking、关键渲染路径 | 加载性能 |
| 网络 | HTTP/2、缓存策略、CDN、压缩、域名分片 | 网络性能 |
| 内存 | JS 内存模型、V8 GC、内存泄漏场景与排查 | 内存与内存泄漏 |
| 工具 | Lighthouse、Performance 面板、Performance API、监控埋点 | 性能测量工具 |
学习路径
建议按以下顺序阅读：
- 先建立度量意识：从 性能指标与 Core Web Vitals 入手，理解 LCP/INP/CLS 的定义与达标值，没有度量就没有优化。
- 理解渲染管线：阅读 渲染性能，掌握浏览器从 HTML 到像素的完整流程，才能解释"为什么动会卡"。
- 优化加载阶段：进入 加载性能 学习代码分割、预加载与关键路径优化，这是首屏速度的核心。
- 关注传输层：网络性能 讲解 HTTP/2、缓存与 CDN，是加载性能的延伸与补充。
- 深入运行时：内存与内存泄漏 关注长时间运行页面的稳定性，SPA 与重度交互场景必备。
- 回到工具与监控：性能测量工具 介绍如何在真实用户与实验室环境下持续度量性能，并落地为线上监控。
性能优化的通用思路
无论面对哪个方向，性能优化都遵循一套通用方法论：
- 度量先行：先用工具（Lighthouse、Performance、Performance API）拿到现状数据，避免"凭感觉优化"。
- 定位瓶颈：分析火焰图、网络瀑布图、内存快照，找到真正的耗时/内存热点。
- 设定目标：例如"LCP < 2.5s"、"长任务占比下降 50%"，目标要可量化。
- 实施优化：选择对应的优化手段（分割、懒加载、缓存、合成层等），一次只改一个变量。
- 验证回归：再次度量，对比指标变化，确认优化有效且未引入新的退化。
- 持续监控：通过 Performance API 上报真实用户数据（RUM），建立长期性能基线。
面试小提示：在被问到"你做过哪些性能优化"时，遵循 "问题 → 指标 → 分析 → 方案 → 效果" 的叙事结构，比单纯罗列"我用了懒加载、tree shaking"要有说服力得多。数据驱动是高级工程师的标志。