PerformancePaintTiming
Baseline 广泛可用 *
PerformancePaintTiming 接口提供有关网页构建期间“绘制”（也称为“渲染”）操作的计时信息。“绘制”是指将渲染树转换为屏幕像素。
此 API 提供两个关键的绘制时间点：
第三个关键绘制时间点由 LargestContentfulPaint API 提供。
- 最大内容绘制 (LCP)：在视口中可见的最大图像或文本块的渲染时间，从页面开始加载时开始记录。
此 API 提供的数据有助于您最大程度地减少用户等待内容开始显示的时间。缩短这些关键绘制时间点的时间，可以让网站对用户感觉更具响应性、性能更优、更吸引人。
与其他 Performance API 一样，此 API 扩展了 PerformanceEntry。
实例属性
此接口没有自己的属性，但通过以下方式限定和约束 PerformanceEntry 的属性：
PerformanceEntry.entryType-
返回
"paint"。 PerformanceEntry.name-
返回
"first-paint"或"first-contentful-paint"。 PerformanceEntry.startTime-
返回绘制发生时的
timestamp。 PerformanceEntry.duration-
返回 0。
实例方法
此接口没有方法。
示例
获取绘制计时
使用 PerformanceObserver 的示例，它会在 paint 性能条目被记录到浏览器的性能时间线时通知您。使用 buffered 选项可以访问观察者创建之前的条目。
js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(
`The time to ${entry.name} was ${entry.startTime} milliseconds.`,
);
// Logs "The time to first-paint was 386.7999999523163 milliseconds."
// Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});
});
observer.observe({ type: "paint", buffered: true });
使用 Performance.getEntriesByType() 的示例，它仅显示调用此方法时存在于浏览器性能时间线中的 paint 性能条目。
js
const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
console.log(`The time to ${entry.name} was ${entry.startTime} milliseconds.`);
// Logs "The time to first-paint was 386.7999999523163 milliseconds."
// Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});
规范
| 规范 |
|---|
| 绘制计时 # sec-PerformancePaintTiming |
浏览器兼容性
加载中…