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
Working Draft Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,