前端性能优化笔记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 等都不计算在内。

First Input Delay（FIP，首次交互延时）

FID 度量的是从用户首次和网站进行交互到响应该事件的实际延时的时间。

对于一个现代网站来说，除了加载速度，响应速度同样重要。

之所以关心首次交互的延迟，除了第一印象很重要，还因为页面加载阶段往往最容易产生卡顿，大部分页面的主线程在此时都很繁忙。

如何判定首次交互

FID 度量的交互行为需要满足以下两个条件。

• 点击、触摸、按键等不包含滚动和缩放。
• 有绑定事件的行为，因为度量的是从用户交互到事件响应的耗时。

满足以上条件的交互行为会被浏览器识别为首次交互。

Cumulative Layout Shift（布局偏移）

CLS 度量的是页面产生的连续累计布局偏移分数。

在性能优化过程中，经常采用懒渲染等方式动态填充页面的内容，或者异步加载一些字体、图片等。这样做是为了具备更好的性能，从而带来更好的用户体验。然后这种布局不稳定，可能会破坏用户的确定性。例如：当用户要点击一个按钮时，突然一个懒加载的组件撑开了内容，就会导致用户的误点击。

1