PerformancePaintTiming
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.
* Some parts of this feature may have varying levels of support.
Paint Timing API 提供的 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.
方法
这个接口没有方法
例子
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 |
浏览器兼容性
Loading…