性能优化 5 分钟完整逐字稿
维护说明
- 这页的主讲口径统一维护在 性能公共素材。
- 如果要改 5 分钟讲法，优先改素材页。
使用方式
- 适合回答“你系统讲一下前端性能优化”“讲一个你做过的性能治理方向”
- 这版不是只讲某个点，而是讲一套完整思路
- 如果面试官继续追问，可以再往首屏、交互卡顿、CLS、监控和防回归展开
5 分钟逐字稿
性能优化 5 分钟逐字稿
如果面试官让我系统讲前端性能优化，我一般不会上来就背一堆技巧，比如
memo、懒加载或者虚拟列表。我会先讲一个框架：前端性能问题我通常分成三类看，第一类是加载性能，第二类是交互性能，第三类是页面稳定性。这样讲的好处是，后面每个指标和动作都能对得上。加载性能这块，我一般重点看
TTFB、FCP和LCP。TTFB更偏服务端和缓存，FCP说明页面什么时候第一次开始有内容，LCP更接近用户对首屏速度的真实体感。如果这些指标差，我第一反应不会是直接改组件，而是先看首屏资源、包体积、图片和字体、缓存命中，以及是不是把太多非首屏逻辑同步打进来了。对应的动作通常是代码拆包、懒加载、资源压缩、图片格式优化、缓存和预加载关键资源。第二类是交互性能，我一般会重点讲
INP。因为对用户来说，页面能不能点得动、输得动，比首屏快一点还是慢一点更容易感知。如果INP差，我会优先怀疑主线程是不是有长任务，比如一次输入触发了太重的排序、过滤、格式化，或者一次状态更新带出了大面积重渲染。React 场景里，我会先看状态边界是不是太大，再看是不是有不必要的重复渲染，最后才考虑memo、useMemo、useCallback这些局部优化。我的原则一直是先缩小更新范围，再谈缓存。第三类是页面稳定性，也就是
CLS。这个指标经常容易被忽略，但用户体感很强。最常见的问题就是图片、广告位、异步模块没有预留尺寸，或者骨架屏和真实内容差异太大，导致页面后续一直往下顶。这个问题的解决思路也比较明确，就是尺寸预留、固定占位、优化异步内容插入方式，让骨架屏更接近最终布局。如果再往工程化一点讲，我不会把性能优化理解成一次性改代码，而会把它看成一个闭环。先用 Web Vitals 和性能监控把问题采上来，再结合浏览器 Performance、React Profiler 和录屏去定位，然后做有优先级的优化，最后再把监控、告警和防回归补齐。因为性能最怕的不是这次慢，而是过几周又慢回去。
所以如果让我用一句话总结，我会说前端性能优化不是某个 API 或某个 hook 的技巧题，而是一套“指标拆解、瓶颈定位、优化动作和持续治理”的完整方法。这样回答，面试官通常会觉得你不是只会背术语，而是真的做过性能治理。
指向原始笔记的链接