[!info] related notes

• 所属 MOC: 前端性能优化 MOC
• 前置概念: 浏览器渲染流程
• 并列概念: performance-monitoring-system, performance-budget, 首字节时间 TTFB

性能指标体系

一句话定义

性能指标体系是衡量”用户感知上更快、更稳、更省”的一系列量化标准，分加载类、交互类、稳定类、运行类四类。

核心内容

加载类指标

指标	全称	定义	优秀标准
FCP	首次内容绘制	页面开始加载到任意内容首次出现在屏幕的时间	< 1.8s
LCP	最大内容绘制	页面开始加载到最大文本或图像元素渲染完成的时间	< 2.5s
TTFB	首字节时间	从发起请求到收到服务器响应第一个字节的时间	< 0.8s
DOMContentLoaded	DOM 就绪	HTML 文档完全解析完成的时间	参考指标
Load	页面加载完成	所有资源加载完成的时间	参考指标

交互类指标

指标	全称	定义	优秀标准
INP	交互响应性能	从用户交互到浏览器呈现响应的延迟（取所有交互中最差的一次）	< 200ms
TTI	可交互时间	页面视觉上完成渲染、初始脚本加载完成、能够响应用户输入的时间	参考指标
TBT	总阻塞时间	FCP 到 TTI 之间主线程被阻塞的时间总和	< 200ms

稳定类指标

指标	全称	定义	优秀标准
CLS	累积布局偏移	页面生命周期内所有意外布局偏移的最大一连串分数	< 0.1

运行类指标

• FPS：每秒帧率，目标 60fps
• Long Task 数量：长任务数量，越少越好
• JS Heap 内存：堆内存占用，长期运行应稳定
• 接口成功率/超时率：网络请求质量

边界与易混淆点

FCP vs LCP

• FCP：任意内容首次出现
• LCP：最大内容（通常是首屏主图或大文本块）何时出现
• LCP 比 FCP 更能反映用户真正看到”主要内容”的时间

INP vs FID

• FID（首次输入延迟）已被 INP 取代
• INP 考虑所有交互，而不只是第一次交互

CLS 的常见来源

• 图片、iframe、广告位未预留宽高
• 字体加载导致文字跳动
• 异步模块加载导致布局变化

学习检查

不看正文回答：

1. FCP、LCP、TTFB、INP、CLS 分别主要观察用户体验的哪一阶段？
2. 为什么 TBT 与 INP 不能直接当作同一个指标？
3. FCP 很快但 LCP 很慢说明了什么类型的问题值得继续查？
4. CLS 为什么属于稳定性而不是单纯加载速度？
5. Lab 指标与真实用户 RUM 指标为什么可能不一致？
6. 一个性能优化目标应该怎样从“更快”改写成可验证的指标目标？

Related notes

• 前端性能优化 MOC
• 前端工程化中的性能优化