前端性能指标和计算方法

背景

现代网页设计越来越复杂，用户体验日渐受到更多开发者的关注，但用户体验和网站性能是比较主观感受的概念，因此需要一些客观的指标来帮助衡量页面的性能。

1.FP 白屏（First Paint Time ）：从页面开始加载到浏览器中检测到渲染（任何渲染）时被触发（例如背景改变，样式应用等）

（白屏时间过长，会让用户认为我们的页面不能用或者可用性差）

计算的方式->

白屏时间 = firstPaint - pageStartTime

2.FCP 首屏（first contentful paint ）：从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。

（关注的焦点是内容，这个度量可以知道用户什么时候收到有用的信息（文本，图像等））

计算的方式->

首屏时间 = firstContentTime - pageStarTime

3.FMP 首次有效绘制（First Meaningful Paint ）：表示页面的“主要内容” 开始出现在屏幕上的时间点，这项指标因页面逻辑而异，因此上不存在任何规范。

（只是记录了加载体验的最开始。如果页面显示的是启动图片或者loading 动画，这个时刻对用用户而言没有意义）

4.LCP （Largest Contentful Paint ）：LCP 指标代表的是视窗最大可见图片或者文本块的渲染时间。

（可以帮助我们捕获更多的首次渲染之后的加载性能，但这各指标过于复杂，而且很难解释，也经常出错，没办法确定主要内容什么时候加载完。）

·<img> 元素

·<svg> 中的<imge>元素

·<video> 元素（如果定义了封面图，会影响LCP）

·带url()背景图的元素

·块级元素有文本节点或者内联文本子元素

5.长任务（Long Task）：当一个任务执行时间超过50ms 时消耗到的任务

（50ms 阈值是从RAIL模型总结出来的结论，这个是google研究用户感知得出的结论，类似永华的感知/耐心的阈值，超过这个阈值的任务，用户会感知到页面的卡顿）

6.TTI （Time To Internative）：从页面开始到它的主要子资源加载到能够快速地响应用户输入的时间。（没有耗时长任务）

计算方式：

1.FCP 时间为起始时间

2.查找到指示有5s的静默窗口时间（没有长任务并且不超过两个正在执行的GET请求）。

3.向后搜索静默窗口前的最后一个长任务，如果没有找到长任务，则在FCP上停止。

4.TTI 是在安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与FCP相同）

7.首次输入延时FID （first Input Delay）：从用户第一次与页面交互到浏览器实际能够开始处理事件的时间。（点击，输入，按键）

（人为因素会干预TTI 的结果强调了第一印象，而第一印象对于塑造我们对网站质量和可靠性的整体印象至关重要，因此，改善网站的第一个用户交互将对提高整体的网络交互性产生最大的影响）

8.总阻塞时间TBT（total blocking time ）：衡量从FCP到TTI 之间主线程被阻塞时长的总和。

（FID需要依赖用户实际进行操作来计算，不方便开发者通过工具进行测量）

计算方式：

TBI = 200 + 40 +105

9.DCL （DOMContentLoaded）：当HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式，图像和子框架的完成加载。

10.L（onLoaded）：当依赖的资源，全部加载完毕之后才会触发

页面加载期间的指标：目前我们在web上看到的最大的交互问题发生在页面加载过程中

加载渲染和交互响应

FP vs FCP

简单页面，二者差距不大，任选其一即可

复杂页面，需要处理更多复杂元素，白屏和白屏时间相差大，通常首屏时间会更有用

FMP vs LCP

LCP对我们来说是一个非常直观的可以看到真实用户的体验的数据

LongTask ---- TTI， FID，TBT

FID 更适合真实用户场景

TBT 更适合实验室场景

最后编辑于：2020.10.15 15:04:49