前端性能指标

常见性能指标:

1. FP（First Paint–首次像素绘制）：是时间线上的第一个“时间点”，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻，这个时间点，叫做FP；
2. FCP（First Contentful Paint–首次内容绘制）：这个指标用于记录浏览器首次绘制来自DOM的内容，例如：文本，图片，SVG，非空白canvas元素等，这个时间点叫FCP。FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标，但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标；
3. LCP（Largest Contentful Paint–最大内容绘制）：用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录，根据W3C Web性能工作组的讨论和Google的研究，发现测量页面主要内容的可见时间有一种更精准且简单的方法是查看什么时候渲染最大元素；
4. FMP（First Meaningful Paint–首次有效绘制）：页面的“主要内容”开始出现在屏幕上的时间点，FMP本质上是通过一个算法来猜测某个时间点可能是FMP，所以有时候不准，FP与FCP可以让我们知道，我们的产品何时开始渲染；而FMP与LCP可以让我们了解我们的产品何时“有用”，站在用户的角度，FMP与LCP可以表示我们的产品需要多久才能体现出价值;
5. Speed Index**：显示页面可见部分的平均时间，数值越小说明速度越快，它主要用于测量页面内容在视觉上填充的速度；
6. TTI（Time to Interactive–可交互时间）：表示网页第一次 完全达到可交互状态 的时间点，可交互状态指的是页面上的UI组件是可以交互的（可以响应按钮的点击或在文本框输入文字等），不仅如此，此时主线程已经达到“流畅”的程度，主线程的任务均不超过50毫秒。TTI很重要，因为TTI可以让我们了解我们的产品需要多久可以真正达到“可用”的状态；
7. FCI（First CPU Idle–首次CPU空闲）：是对TTI的一种补充，TTI可以告诉我们页面什么时候完全达到可用，但是我们不知道浏览器第一次可以响应用户输入是什么时候，我们不知道网页的“最小可交互时间”是多少，最小可交互时间是说网页的首屏已经达到了可交互的状态了，但整个页面可能还没达到，第一次CPU空闲，主线程空闲就代表可以接收用户的响应了；
8. FID（First Input Delay–首次输入延迟）：指的是用户首次与产品进行交互时，我们产品可以在多长时间给出反馈，TTI可以告诉我们网页什么时候可以开始流畅地响应用户的交互，但是如果用户在TTI的时间内，没有与网页产生交互，那么TTI其实是影响不到用户的，TTI是不需要用户参与的指标，但如果我们真的想知道TTI对用户的影响，我们需要FID，不同的用户可能会在TTI之前开始与网页产生交互，也可能在TTI之后才与网页产生交互，所以对于不同的用户它的FID是不同的。如果在TTI之前用户就已经与网页产生了交互，那么它的FID时间就比较长，而如果在TTI之后才第一次与网页产生交互，那么他的FID时间就短。
9. CLS（Cumulative Layout Shift–累计位移偏移）：记录了页面上非预期的位移波动，页面渲染过程中突然插入一张巨大的图片或者说点击了某个按钮突然动态插入了一块内容等等相当影响用户体验的网站。这个指标就是为这种情况而生的，计算方式为：位移影响的面积 * 位移距离，下图文本移动了 25% 的屏幕高度距离（位移距离），位移前后影响了 75% 的屏幕高度面积（位移影响的面积），那么 CLS 为 0.25 * 0.75 = 0.1875；
   
10. TTFB（Time to First Byte–首字节时间）：网络请求被发起到从服务器接收到第一个字节这段时间，客户端开始收到服务器响应数据的时间=后台处理时间+重定向时间，是反映服务端响应速度的重要指标；
11. TBT（Total Blocking Time–阻塞总时间）：记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和，假如说在 FCP 到 TTI 之间页面总共执行了以下长任务（执行时间大于 50ms）及短任务（执行时间低于 50ms）,
    
    那么每个长任务的阻塞时间就等于它所执行的总时间减去 50ms，TBT 总共等于200+40+105=345ms。
    
12. 首屏时间：在不滚动屏幕下的前提下，用户看到完整第一屏内容花费的时间，首屏内容完全加载完成，才叫首屏，而不是出现内容，或者部分元素没有展示，首屏时间的获取方式：
    (1)首屏模块标签标记法：通过在 html 文档中，在首屏线的位置，添加脚本的方式，去获取这个位置的时间：window.firstScreen = Date.now()，首屏时间 = firstScreen - performance.timing.navigationStart，首屏线其实我们只能大约估摸一个位置，并不能十分精确地适配任何屏幕的手机，因为手机屏大小不一，我们取的位置可能在首屏线之上，可能在首屏线之下，只能得到一个大约的值，但是并不需要太精确的数字，大小屏首屏内容反正不会差太多。适用场景：1. 首屏内不需要拉取数据，否则可能拿到首屏线获取时间的时候，首屏还是空白；2. 不需要考虑图片加载，只考虑首屏主要模块。
    (2)首屏最慢图片加载时间统计：一般来说，首屏内容加载最慢的就是图片资源，所以，可以把首屏内加载最慢的图片的时间 ，当做首屏时间，首先，我们就要拿到首屏内所有的图片，然后遍历他们，逐个监听图片标签的 onload 事件，并收集到他们的加载时间，最后比较得到加载时间的最大值：首屏时间 = 加载最慢的首屏图片时间- performance.timing.navigationStart；
    (3)自定义模块内容计算法：根据业务场景制定合适的计算方法。

三个核心指标:

Google 在2020年5月提出了网站用户体验的三大核心指标，分别为：
LCP
FID
CLS
LCP 代表了页面的速度指标，虽然还存在其他的一些体现速度的指标，但是 LCP 能体现的东西更多一些。一是指标实时更新，数据更精确，二是代表着页面最大元素的渲染时间，通常来说页面中最大元素的快速载入能让用户感觉性能还挺好，官方推荐的时间区间，在 2.5 秒内表示体验优秀；

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

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

LCP 文档：https://web.dev/lcp/
LCP 优化文档：https://web.dev/optimize-lcp/
FID 文档：https://web.dev/fid/
FID 优化文档：https://web.dev/optimize-fid/
CLS 文档：https://web.dev/cls/
CLS 优化文档：https://web.dev/optimize-cls/