前端性能指标有哪些,如何解决
维护说明
- 这页统一引用 性能公共素材 的性能指标口径。
- 如果要改指标讲法,优先改素材页。
一句话先定性
性能指标一句话定性
指向原始笔记的链接如果面试官问性能指标,我不会背一串缩写,而会按“加载速度、交互响应、页面稳定性”三类来讲,再对应说我是怎么优化的。
30 秒版本
Circular transclusion detected: Express/性能公共素材
1 分钟版本
Circular transclusion detected: Express/性能公共素材
2 到 3 分钟版本
Circular transclusion detected: Express/性能公共素材
如果面试官追问“为什么你更强调 LCP 而不是 FCP”
因为
FCP只能说明页面第一次开始有内容,不代表用户真正看到核心内容了。LCP更接近用户对首屏加载的真实体感,所以在首屏体验里通常更有参考价值。
如果面试官追问“INP 差一般怎么排查”
我会先怀疑主线程是不是被长任务占住了,然后看输入事件后有没有大计算、重复渲染或者同步阻塞。前端层面通常就是拆长任务、减少不必要渲染、把非关键逻辑延后执行。
如果面试官追问“CLS 为什么经常高”
最常见就是没预留尺寸。比如图片、广告位、异步模块、骨架屏和真实内容差异太大,这些都会让页面后续把布局顶来顶去。所以 CLS 很多时候不是算法问题,而是布局治理问题。
最后一句收尾
所以如果面试里问性能指标,我会按
TTFB/FCP/LCP讲加载,按INP讲交互,按CLS讲稳定性,再把每个指标对应到具体优化动作上,这样会比背术语更像真实项目经验。