web 性能指标

1.RAIL 性能模型

RAIL 是 Response,Animaiton,Idel 和 Load 首字母的缩写，是一种由 Google Chrome 团队于 2015 年提出的性能模型，用于提升浏览器内用户体验和性能。

2.基于用户体验的性能指标

基于用户体验的性能指标是 Google 在 web.dev 提出的。

First Contentful Paint (FCP)

FCP 首次内容绘制，浏览器首次绘制来自 DOM 的内容的时间，内容必须是文本、图片、非白色的 canvas 或 SVG，也包括带有正在加载中的 web 字体的文本。

FCP 白屏时间 2S 以内是比较好的，超过 2s-4s 是橙色预警，4s 以后就需要优化了。

优化方案:https://web.dev/fcp/

Largest Contentful Paint(LCP)

LCP 最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面上的主要内容对用户可见时间。

LCP 考虑的元素：

• img 元素
• image 元素内的 svg 元素
• video 元素（封面图）
• 通过 url()函数加载背景图片的元素
• 包含文本节点或其他内联级文本元素子级的块级元素

为了提供良好的用户体验，网站应力争使用 2.5s 或者更短的“最大内容绘画”。为了确保你达到大多数用户的这一目标，衡量移动设备和台式机设备的页面加载量的第 75 个百分位数是一个很好的衡量标准。 优化方案：https://web.dev/optimize-lcp/

First Input Delay (FID)

FID 首次输入延迟，从用户第一次与页面交互，到浏览器实际能响应该交互的时间。 输入延迟是因为浏览器的主线程正忙于做其他的事情，所以不能响应用户。发生这种情况的一个常见原因是浏览器正忙于解析和执行应用程序加载大量计算的 js.

第一次输入延迟通常发生在第一次内容绘制 (FCP) 和可持续交互时间(TTI)之间，因为页面已经呈现了一些内容，但还不能可靠的交互。

Time to Interactive (TTI)

表示网页第一次 完全达到可交互状态 的时间,浏览器已经可以持续性的响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务（Long task）完成的时间，并且在随后的 5 秒内网络和主线程是空闲的。

从定义上来看，中文名称叫可持续交互时间或可流畅交互时间。

Total Block Time(TBT)

TBT 总阻塞时间，度量了 FCP 和 TTI 之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。

只要存在长任务，该主线程就被视为阻塞，该任务在主线程运行超过 50 毫秒（ms）。我们说主线程被阻塞是因为浏览器无法中断正在进行的任务，因此，如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。

如果任务足够长，则用户可能会注意到延迟并感觉页面缓慢或过时。

Cumulative Layout Shift (CLS)

CLS 累积布局偏移，导致布局抖动。