构建网站空间,网站开发与维护招聘,app网站建设多少钱,网站模板目录相关 Performance API 都在 window.performance 对象下
performance.now() 方法
精度精确到微妙获取的是把页面打开时间点作为基点的相对时间#xff0c;不依赖操作系统的时间。
部分浏览器不支持 performance.now() 方法#xff0c;可以用 Date.now() 模拟
performance.n…相关 Performance API 都在 window.performance 对象下
performance.now() 方法
精度精确到微妙获取的是把页面打开时间点作为基点的相对时间不依赖操作系统的时间。
部分浏览器不支持 performance.now() 方法可以用 Date.now() 模拟
performance.now function() {// performance.timing.navigationStart 表示页面打开时的时间戳非高精度时间return Date.now() - performance.timing.navigationStart
} 度量首屏
First PaintFP第一次绘制时间
FP代表浏览器第一次在页面上绘制的时间这个时间仅仅是指开始绘制的时间但是未必真的绘制了什么有效的内容。 First Contentful PaintFCP第一次有内容的绘制
FCP代表浏览器第一次绘制出 DOM 元素如文字、input标签等的时间。
FP可能和FCP是同一个时间也可能早于FCP一般来说两者的差距不会太大。 Time to InteractiveTTI可交互时间 First Meaningful PaintFMP第一次有意义的绘制
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 onloadreportNowAsFMP/img
为了使度量结果更加精准Google 也在推动新的标准提案 element-timing
同样以图片为例可以使用如下方式来标记和计算这张图片的渲染时间而后从 JavaScript 的 Performance API 中得到其具体的耗时。
img srcmy_image.jpg elementtimingfoobar
这种方式目前只有 Chrome 支持 Frames Per SecondFPS每秒传输帧数
度量流畅度的指标
对于一个网页来说达到 60fps 就会让用户感到非常流畅如果显著低于这个值那么用户可能就会感到卡顿。
页面至少每隔 16.7ms 就需要渲染一次否则就会出现丢帧。
如果 FPS 长期处在过低的值用户感受到的卡顿就会非常明显。 Core Web Vitals 核心 Web 指标
Largest Contentful Paint LCP最大元素渲染时间
LCP 关注的页面上最大面积的元素渲染完成的时间。
浏览器会持续探测页面中占用面积最大的元素这个元素可能会在加载过程中发生变化如出现了占用面积更大的元素直到页面完全加载后才会把最终占用面积最大的元素的渲染时间定为LCP探测的元素。
如何确定面积
元素的面积主要是根据用户在页面中能够看到的元素的大小计算的。
显示到屏幕以外或者被容器的 overflow 裁剪、遮挡的面积不计算在内。文字元素的面积为包含文字的最小矩形的面积。图片以实际img /组件的大小计算而非原始图片的大小。CSS 设置的 border、padding 等都不计算在内。1
