一、指标定义
学性能优化，首先从指标开始。日常工作和面试中需要熟悉掌握的指标有9个，3个官方核心指标，3个实践核心指标，3个补充指标。
| 指标类型 | 示例指标 | 用户感知 | 优化优先级 |
|---|---|---|---|
| 官方核心 | LCP、FID、CLS | 加载完成感、交互响应、视觉稳定 | 最高（影响 SEO） |
| 实践核心 | FP、FCP、TTI | 白屏时长、首屏内容、可交互性 | 次高 |
| 补充指标 | TTFB、DCL、FMP | 服务器响应、DOM 可用时间 | 按需关注 |
1、官方定义的核心性能指标（Web Vitals），直接影响用户体验和 SEO：
| 指标 | 定义 | 归属 |
|---|---|---|
| LCP | 最大内容元素加载并渲染完成且位于视口内的时间点。 | 官方核心指标（W3C） |
| FID | 用户首次交互到响应的延迟时间。 | 官方核心指标（W3C） |
| CLS | 累积布局偏移，衡量视觉稳定性。 | 官方核心指标（W3C） |
LCP：最大内容元素加载并渲染完成且位于视口内的时间点，反映用户视觉上认为页面 “加载完成” 的时间。
FID：First Input Delay，用户首次交互到响应的延迟时间。
- FID计算 是从用户输入事件（如
mousedown、keydown等）触发的时间点开始，到浏览器主线程能够处理该事件的时间点结束。 - 这个延迟主要是由于主线程在处理其他任务（如执行 JavaScript 代码）而无法及时响应用户输入所导致的。
CLS：Cumulative Layout Shift，用于衡量页面在加载过程中发生的布局偏移的累积量。
- 当页面中的元素在加载过程中突然改变位置、大小或出现新元素时，就会导致布局偏移。
- CLS 是所有这些布局偏移的累积分数，分数越高，表示页面的布局越不稳定。
2、实践中业内公认的核心指标，常用于性能监控：
| 指标 | 定义 | 适用场景 |
|---|---|---|
| FP | 浏览器首次绘制任何像素的时间点。 | 白屏结束标志 |
| FCP | 首次渲染有意义内容（文本 / 图像）的时间点。 | 首屏内容加载速度 |
| TTI | 页面达到可交互状态的时间。 | 交互流畅度 |
FP: First Paint，FP 是浏览器首次将任何像素绘制到屏幕上的时间点，可能包括背景色、渐变、文本或图像。行业共识 白屏时间 以 FP 为分割线。
FCP: First Contentful Paint, 浏览器开始渲染首个有实际含义的内容块（如文本、图像、非空白 <canvas>），可以作为首屏加载开始的时间分割线。
TTI: Time To Interaction, 页面达到可交互状态的时间，即主线程空闲（无长任务）且页面能响应用户输入（如点击、滚动）的时间。
3、按需关注的补充指标：
| 指标 | 定义 | 适用场景 |
|---|---|---|
| TTFB | 服务器返回第一个字节的时间。 | 服务器的响应速度，来自官方标准（HTTP 规范） |
| DCL | DOMContentLoaded 事件触发时间。 | DOM 加载完成的时间点，官方标准（HTML 规范） |
| FMP | First Meaningful Paint，首个完整内容块渲染完成的时间点。 | 传统性能监控（逐渐被 LCP 替代） |
