初代性能参考标准 - RAIL
在 Web Vitals 出现之前，Google 采用 RAIL 模型来衡量 Web 应用的性能。这个框架将用户交互分为四个阶段：
Response 响应
要求在 100 毫秒内响应用户输入。
Animation 动画
要求在 10 毫秒内生成一帧动画。
Idle 空闲
在空闲时间内执行后台任务，以保持应用的响应能力。
Load 加载
要求在 5 秒内加载并呈现页面内容。
虽然 Web Vitals 已经取代了 RAIL，但该模型仍然对识别性能瓶颈很有帮助。
现在的标准 - Web Vitals
Web Vitals 是 Google 推出的一组用于衡量网站性能的指标，相比之前更加可量化和可测量。使用第 75 百分位的测量值可以提供有意义的真实世界洞察。
Core Web Vitals
三个主要指标构成了核心：
LCP (Largest Contentful Paint)
测量视口内最大内容元素何时完成渲染。
参与计算的元素包括：
<img>元素<svg>中嵌套的<image>元素<video>元素（使用封面图）- 通过
url()函数加载背景图的元素 - 包含文本节点的块级元素
上报时机： 浏览器会持续派发 largest-contentful-paint PerformanceEntry 事件。在页面加载完成时上报最新的条目。
FID (First Input Delay)
FID 指的是用户第一次和页面交互后（比如点击按钮），浏览器响应并处理事件的时间。
目标：100 毫秒或更短。
为什么关注首次输入？ 首次交互会形成用户对网站响应性的第一印象。JavaScript 执行、资源加载和网络请求都可能导致输入延迟。
测量示例：
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
const delay = entry.processingStart - entry.startTime;
console.log('FID candidate:', delay, entry);
}
}).observe({type: 'first-input', buffered: true});CLS (Cumulative Layout Shift)
CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。
目标：0.1 或更低。
为什么重要： 意外的布局偏移会干扰用户交互，造成糟糕的体验。
计算公式：
布局偏移分数 = 影响分数 × 距离分数- 影响分数：受偏移元素影响的视口比例
- 距离分数：元素偏移的视口比例
其他指标
FCP (First Contentful Paint)
首次内容绘制，开始加载到页面内容的任何部分在屏幕上完成渲染的时间。
TTFB (Time to First Byte)
页面返回首字节时间，用来判断页面资源返回速度。
如何查看网站的 Web Vitals？
LightHouse
Chrome DevTools 内置了 LightHouse 用于性能评估。Performance 部分包含全面的 Web Vitals 指标。
浏览器插件
Google 提供了官方浏览器插件，在弹窗界面中显示实时指标。
链接：https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
web-vitals 库
官方也提供了一个 js 的库方便调用：
import {onCLS, onFID, onLCP} from 'web-vitals';
onCLS(console.log);
onFID(console.log);
onLCP(console.log);