PerformancePaintTiming - 提供有关 “绘制” 操作的时序信息

PerformancePaintTiming 是 Paint Timing 的接口，在网页构建期间提供有关 “绘制”（也称为 “渲染”）操作的时序信息。“绘制” 是指将渲染树转换为屏幕上的像素。

应用程序可以为 “paint” 性能指标类型 注册 PerformanceObserver，观察者可以检索绘制事件发生的时间。使用此信息可以帮助您确定花费了太长时间才能提供良好用户体验的地方。

属性

该接口没有属性，但是通过如下限定和约束属性来扩展 PerformanceEntry 的属性（用于 “paint” 性能指标类型），如下所示：

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(performanceEntry.name + " 的时间为 " + performanceEntry.startTime + " 毫秒。");
    });
  } else {
    console.log('不支持性能计时。');
  }
}

上面的代码产生控制台输出，类似下面所示：

first-paint 的时间为 2789.915 毫秒。
first-contentful-paint 的时间为 2787.460 毫秒。

规范

规范	状态	备注
Paint Timing PerformancePaintTiming 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性