PerformancePaintTiming
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Paint Timing API (en-US) 提供的 PerformancePaintTiming
是一个提供页面在构建过程中的“绘制”(也称“渲染”)时间点信息的接口。“绘制”是指将渲染树转换为页面上像素的过程。
应用可以为名为“paint
”的performance entry 类型
注册一个PerformanceObserver
,然后观察者可以获取绘制相关的事件发生的时间。以此来帮你找出那些花费太多时间去绘制的区域,而后提升用户体验。
属性
这个接口没有属性,但是(为了"paint
" performance entry 类型
)通过一些限制和约束 扩展了以下PerformanceEntry
属性
PerformanceEntry.entryType
-
返回 "
paint
". PerformanceEntry.name
-
返回
"first-paint"
或"first-contentful-paint"
. PerformanceEntry.startTime
(en-US)-
当开始“绘制“时返回
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 1 # sec-PerformancePaintTiming |
浏览器兼容性
BCD tables only load in the browser