前端性能优化–性能指标

在之前的性能优化系列文章中，分享了前端性能优化的具体措施。但是在实际工作中，如何量化性能也是相当重要的一环，需要一些客观的指标来衡量页面的性能。本文会介绍几个性能指标及其衡量方式。

性能指标

FP

FP（First Paint，首次绘制），也被称为白屏时间，用于记录页面第一次绘制像素的时间。

可以通过 Performance API^[1] 获取 FP 值。

// 获取 FP 值
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName("first-paint")) {
    console.log("FP candidate:", entry.startTime + "ms");
  }
}).observe({ type: "paint", buffered: true });

该指标侧重的是像素绘制，比如开始绘制背景色。虽然背景颜色可能绘制得很快，但实际内容/交互可能需要更长的时间才能加载。在这种情况下，FP 指标的价值并不大，可以使用 FCP 来替代。

FCP

FCP(First Contentful Paint，首次内容绘制)，用于记录页面首次绘制文本、图片、非空白 Canvas 或 <svg>元素的时间。

该指标关注的焦点是内容，用来度量用户第一次看到有用的信息的时间。对于用户体验评估而言，该指标比 FP 更有实际价值。

根据 Google 的建议^[2]，为了提供良好的用户体验，网站应该努力将 FCP 控制在 1.8 秒或以内。

可以通过 Performance API 获取 FCP 值。

// 获取 FCP 值
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName("first-contentful-paint")) {
    console.log("FCP candidate:", entry.startTime + "ms");
  }
}).observe({ type: "paint", buffered: true });

LCP

LCP（Largest Contentful Paint，最大内容绘制），用于衡量可视区域内可见的最大的内容元素绘制到页面上的速度。

值得注意的是，该时间通常会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变。如下面例子所示，随着页面滚动，最大元素从标题区域变化成了图片元素（绿色线条包围部分）。

根据 Google 建议，为了提供良好的用户体验，网站应该努力将 LCP 控制在 2.5 秒或以内。

可使用 Performance API 获取 LCP 值。

// 获取 LCP 值
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log("LCP candidate:", entry.startTime + "ms", entry);
  }
}).observe({ type: "largest-contentful-paint", buffered: true });

TTI

TTI（Time to Interactive，可交互时间），该指标测量首次内容绘制 (FCP)之后页面可靠地为用户交互做好准备的最早时间。简单来说，快速的 TTI 有助于确保页面可用。

TTI 被测量为 5 秒空闲窗口之前最后一个长任务的时间或者 FCP 时间。

一般而言，应将 FCP 和 TTI 之间的差值降至最低。因为当用户尝试与看似具备交互性但实际上并非如此的页面进行交互时，反而会带来不好的体验。

FID

FID（First Input Delay，首次输入延迟），测量用户第一次与页面交互直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。FID 有助于衡量网站的交互性和响应度，低 FID 有助于让用户确信页面是有效的。

较长的 FID 通常发生在 FCP 和 TTI 之间，如下图所示，如果用户在长任务执行时就尝试与页面进行交互，那么浏览器必须等到任务完成后才能对输入作出响应。浏览器必须等待的这段时间就是这位用户在该页面上体验到的 FID 值。

根据 Google 建议，为了提供良好的用户体验，网站应该努力将 FID 控制在 100 毫秒或以内。

可以使用 Performance API 获取 FID 值

// 获取 FID 值
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log("FID candidate:", delay + "ms", entry);
  }
}).observe({ type: "first-input", buffered: true });

TBT

TBT（Total Blocking Time，总阻塞时间），记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和。在实际场景中，可以认为 TBT 是 FID 的替代品。

以下面这张页面加载期间浏览器主线程的图表为例，时间轴上有五个任务，其中三个是长任务（在主线程上运行超过 50 毫秒的任务）。

下图显示了各个长任务的阻塞时间，虽然在主线程上运行任务的总时间为 560 毫秒，但其中只有 345 毫秒被视为阻塞时间。因此 TBT 为 345ms

可通过 Performance API 获取 TBT 值。

// 获取 TBT 值
var totalBlockingTime = 0;
var observer = new PerformanceObserver(function (list) {
  let perfEntries = list.getEntries();
  for (const perfEntry of perfEntries) {
    totalBlockingTime += perfEntry.duration - 50;
  }
  console.log("TBT: ", totalBlockingTime + "ms");
});
observer.observe({ type: "longtask", buffered: true });

总结

本文介绍了 6 个性能指标及其使用 Performance API 的获取方式。另外，在 Chrome DevTools 工具中，也可以通过 Performance 和 LightHouse 面板来进行可视化性能监测。