前端性能优化笔记2 第二章 度量

相关 Performance API 都在 window.performance 对象下

performance.now() 方法

• 精度精确到微妙
• 获取的是把页面打开时间点作为基点的相对时间，不依赖操作系统的时间。

部分浏览器不支持 performance.now() 方法，可以用 Date.now() 模拟

performance.now = function() {// performance.timing.navigationStart 表示页面打开时的时间戳，非高精度时间return Date.now() - performance.timing.navigationStart
}

度量首屏

First Paint（FP，第一次绘制时间）

FP代表浏览器第一次在页面上绘制的时间，这个时间仅仅是指开始绘制的时间，但是未必真的绘制了什么有效的内容。

First Contentful Paint（FCP，第一次有内容的绘制）

FCP代表浏览器第一次绘制出 DOM 元素（如文字、<input>标签等）的时间。

FP可能和FCP是同一个时间，也可能早于FCP，一般来说两者的差距不会太大。

Time to Interactive（TTI，可交互时间）

First Meaningful Paint（FMP，第一次有意义的绘制）

FMP是一个主观的指标，毕竟意义本身就是一个主观的概念。

FMP作为一个主观指标，指的是我们主观认为页面渲染有意义内容的时间点。

度量FMP的方式：

关键逻辑计时

手动使用 JavaScript 记录时间点，从而将其作为 FMP 的时间。

例如：在 React 中，可以在组件第一次挂载后打一个时间点。

useEffect(() => {const FMP_TIME = performance.now()reprotFMP(FMP_TIME)
}, [])

Hero Element

某项重要元素的展示时间就可以被视为 FMP 的时间，如搜索结果页的搜索内容、首页的banner等。这样的关键元素就是 Hero Element。可以使用 Hero Element 的渲染完成时间作为 FMP。

如：

<img onload="reportNowAsFMP"></img>

为了使度量结果更加精准，Google 也在推动新的标准提案 element-timing 

同样以图片为例，可以使用如下方式来标记和计算这张图片的渲染时间，而后从 JavaScript 的 Performance API 中得到其具体的耗时。

<img src="my_image.jpg" elementtiming="foobar">

这种方式目前只有 Chrome 支持

Frames Per Second（FPS，每秒传输帧数）

度量流畅度的指标

对于一个网页来说，达到 60fps 就会让用户感到非常流畅，如果显著低于这个值，那么用户可能就会感到卡顿。

页面至少每隔 16.7ms 就需要渲染一次，否则就会出现丢帧。

如果 FPS 长期处在过低的值，用户感受到的卡顿就会非常明显。

Core Web Vitals （核心 Web 指标）

Largest Contentful Paint （LCP，最大元素渲染时间）

LCP 关注的页面上最大面积的元素渲染完成的时间。

浏览器会持续探测页面中占用面积最大的元素，这个元素可能会在加载过程中发生变化（如出现了占用面积更大的元素），直到页面完全加载后，才会把最终占用面积最大的元素的渲染时间定为LCP探测的元素。

如何确定面积：

元素的面积主要是根据用户在页面中能够看到的元素的大小计算的。

• 显示到屏幕以外，或者被容器的 overflow 裁剪、遮挡的面积不计算在内。
• 文字元素的面积为包含文字的最小矩形的面积。
• 图片以实际<img />组件的大小计算，而非原始图片的大小。
• CSS 设置的 border、padding 等都不计算在内。

1