关于前端性能指标的学习笔记.txt

1.性能指标的发展：
L（Onload Event），它代表页面中依赖的所有资源加载完的事件。
DCL（DOMContentLoaded），HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载。
FP（First Paint），表示渲染出第一个像素点，FP一般在HTML解析完成或者解析一部分时候触发。空div且没有样式，也就是没有边界，这时候不会触发FP，视口外的元素不会触发FP。
FCP（First Contentful Paint），表示渲染出第一个内容，这里的“内容”可以是文本、图片、canvas。
空div不会触发FCP。
有FCP一定有FP。
FP肯定不会在FCP后面出现（有可能一起出现），因为渲染出内容，一定也渲染出了像素。
FCP有可能比DCL早（首次加载内容较多时，浏览器会加载一部分渲染一部分）。
FMP（First Meaningful Paint），首次渲染有意义的内容的时间，“有意义”没有一个标准的定义，FMP的计算方法也很复杂。
LCP（largest contentful Paint），最大内容渲染时间。

DCL和L
最初，评价前端页面加载性能有两个指标：DOMContentLoaded和load事件，分别代表DOM构造完成和首屏资源加载完成。
这两个指标关注的点是‘加载’，适用于以前的基于mvc架构的页面及服务端渲染的页面，但不适用于单页面应用。

FP、FCP、FMP
FP、FCP这两个指标虽然表达了渲染的事件，但对“用户关注的内容”没有体现，比如首屏渲染出来一个背景，或者一个loading，可能对于用户来说和白屏区别不大。FMP虽然体现了“关键内容”的要素，但它是复杂的、模糊的，甚至是错误的，并不能准确识别页面主要内容的加载时机。

LCP
表示“用于度量视口中最大的内容元素何时可见”，它用来代替FMP，表征页面的关键元素何时可以被用户看到。

除了加载性能，还有可交互时间、稳定性指标、流畅性指标，在不同的业务场景都可以被监控用来作为提升用户体验的依据。

2.白屏和首屏

白屏结束时间 = FP事件触发时间
首屏结束时间 = FCP事件触发时间（有些业务中希望用更关键的内容的渲染来表示首屏，这时候可以用FMP或者LCP来作为首屏的计算指标）

FP、FCP、LCP、L和DCL时间都可以通过performance API计算

LCP也可以通过谷歌的web-vitals获取

3.可交互时间

首次可交互
即DOM加载并解析完成后，界面上的元素可以交互（如输入框可以输入、按钮可以点击、超长元素可以滚动）。其时间用performance.timing.domInteractive计算。

performance.timing.domInteractive：当前网页DOM结构结束解析、开始加载内嵌资源的时间，document.readyState 变成interactive，并将抛出"readyStateChange"事件（注意只是DOM树解析完成，这时候并没有开始加载网页内的资源）

TTI（Time To Interactive）
用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。
需满足以下条件：
页面已经显示有用内容。
页面上的可见元素关联的事件响应函数已经完成注册。
事件响应函数可以在事件发生后的 50ms 内开始执行（主线程无 Long Task）

FID（First Input Delay）
用于度量用户第一次与页面交互的延迟时间，是用户第一次与页面交互到浏览器真正能够开始处理事件处理程序以响应该交互的时间。

相对于TTI，FID表示实际的用户操作的延时，更能从用户角度反映网页的交互性能。

4.稳定性
CLS（Cumulative Layout Shift）累计布局偏移

是对在页面的整个生命周期中发生的每一次意外布局变化的最大布局变化得分的度量，布局变化得分越小证明你的页面越稳定。

听起来有点复杂，这里做一个简单的解释：

不稳定元素：一个非用户操作但发生较大偏移的可见元素称为不稳定元素。
布局变化得分：元素从原始位置偏移到当前位置影响的页面比例 * 元素偏移距离比例。
网站应努力使 CLS 分数小于 0.1 。

可以通过web-vitals获取CLS。

5.流畅性

FPS 帧速率

目前浏览器标准中暂时没有提供相应 API ，只能手动实现。这里需要借助 requestAnimationFrame 方法模拟实现，浏览器会在下一次重绘之前执行 rAF 的回调，因此可以通过计算每秒内 rAF 的执行次数来计算当前页面的 FPS。

6. Core Web Vitals
Core Web Vitals是谷歌提出的，衡量用户体验的新指标，指标将被纳入谷歌搜索引擎的网页排名。
Core Web Vitals是用户体验和SEO的重要指标。

关键的指标包括

LCP，用来衡量页面加载性能，为了提供良好的用户体验，LCP应该在页面首次开始加载后的2.5秒内发生
FID，衡量交互性能，为了提供良好的用户体验，页面的FID应该小于100毫秒。
CLS，测量视觉稳定性。为了提供良好的用户体验，页面应该保持CLS小于0.1。

import {getLCP, getFID, getCLS} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);


参考：https://blog.csdn.net/doomliu/article/details/124771351