前端的几个性能指标

参考：https://juejin.cn/post/7063754993072865287

一、性能指标：

指标	含义
FP	首次绘制
FCP	首次内容绘制
LCP	最大内容绘制
FID	首次输入延迟
TTI	可交互时间
TBT	总阻塞时间
CLS	累积布局偏移

• FP： 第一次绘制像素的时间
• FCP：首次内容绘制，首次绘制文本、图片、非空白 Canvas 或 SVG 的时间，FP<= FCP
• LCP：视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录
• FID：记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。这个指标其实挺好理解，就是看用户交互事件触发到页面响应中间耗时多少，如果其中有长任务发生的话那么势必会造成响应时间变长。
• TTI：

1. 从 FCP 指标后开始计算
2. 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求
3. 往前回溯至 5 秒前的最后一个长任务结束的时间

• TBT：记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和
• CLS：记录了页面上非预期的位移波动。

二、白屏

和白屏相关的两个指标：FP、FCP

FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标。因此说我们可以把这两个指标认为是和白屏时间相关的指标，所以肯定是最快越好。按照官方的推荐时间， FP 及 FCP 两指标在 2 秒内完成的话我们的页面就算体验优秀

三、三大核心指标

Google 在20年五月提出了网站用户体验的三大核心指标，分别为：

LCP
FID
CLS

LCP 代表了页面的速度指标，虽然还存在其他的一些体现速度的指标，但是上文也说过 LCP 能体现的东西更多一些。一是指标实时更新，数据更精确，二是代表着页面最大元素的渲染时间，通常来说页面中最大元素的快速载入能让用户感觉性能还挺好。

FID 代表了页面的交互体验指标，毕竟没有一个用户希望触发交互以后页面的反馈很迟缓，交互响应的快会让用户觉得网页挺流畅。

CLS 代表了页面的稳定指标，尤其在手机上这个指标更为重要。因为手机屏幕挺小，CLS 值一大的话会让用户觉得页面体验做的很差。