PerformancePaintTiming

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Paint Timing API 提供的 PerformancePaintTiming 是一个提供页面在构建过程中的“绘制”（也称“渲染”）时间点信息的接口。“绘制”是指将渲染树转换为页面上像素的过程。

应用可以为名为“paint”的performance entry 类型 注册一个PerformanceObserver，然后观察者可以获取绘制相关的事件发生的时间。以此来帮你找出那些花费太多时间去绘制的区域，而后提升用户体验。

属性

这个接口没有属性，但是（为了"paint" performance entry 类型）通过一些限制和约束扩展了以下PerformanceEntry属性

PerformanceEntry.entryType: 返回 "paint".
PerformanceEntry.name: 返回 "first-paint" 或"first-contentful-paint".
PerformanceEntry.startTime: 当开始“绘制“时返回 timestamp.
PerformanceEntry.duration: 返回 0.

方法

这个接口没有方法

例子

function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType("paint");
    performanceEntries.forEach((performanceEntry, i, entries) => {
      console.log(
        "The time to " +
          performanceEntry.name +
          " was " +
          performanceEntry.startTime +
          " milliseconds.",
      );
    });
  } else {
    console.log("Performance timing isn't supported.");
  }
}

上面例子输出如下

The time to first-paint was 2785.915 milliseconds.
The time to first-contentful-paint was 2787.460 milliseconds.

规范

Specification
Paint Timing # sec-PerformancePaintTiming