PerformancePaintTiming

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

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

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

PerformanceEntry PerformancePaintTiming

属性

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

PerformanceEntry.entryType

返回 "paint".

PerformanceEntry.name

返回 "first-paint""first-contentful-paint".

PerformanceEntry.startTime

当开始“绘制“时返回 timestamp.

PerformanceEntry.duration

返回 0.

方法

这个接口没有方法

例子

js
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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PerformancePaintTiming
first-contentful-paint named entry
first-paint named entry

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support