部分浏览器不支持

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

部分浏览器不支持

performance.timing.navigationStart

Date.now()

performance.timing.navigationStart

度量首屏

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

First

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

Time

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

关键逻辑计时

performance.now()reprotFMP(FMP_TIME)

[])

的时间如搜索结果页的搜索内容、首页的banner等。

这样的关键元素就是

Hero

同样以图片为例可以使用如下方式来标记和计算这张图片的渲染时间而后从

JavaScript

就会让用户感到非常流畅如果显著低于这个值那么用户可能就会感到卡顿。

页面至少每隔

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

如何确定面积

裁剪、遮挡的面积不计算在内。

文字元素的面积为包含文字的最小矩形的面积。

图片以实际img

border、padding