相关 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 元素（如文字、标签等）的时间。

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。

如：

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

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

这种方式目前只有 Chrome 支持

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

度量流畅度的指标

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

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

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

Core Web Vitals （核心 Web 指标）

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

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

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

如何确定面积：

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

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

1