PerformancePaintTiming

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Paint Timing  提供的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 Status Comment
Paint Timing
PerformancePaintTiming
Editor's Draft Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 60 ? ? 47 ?
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 60 60 ? ? ? 47 ?

文档标签和贡献者

 此页面的贡献者: sinbargit
 最后编辑者: sinbargit,