PerformancePaintTiming

PerformancePaintTiming 接口提供关于网页构建过程中的“绘制”（也称为“渲染”）操作的时间信息。“绘制”指的是将渲染树转换为屏幕像素的过程。

此 API 提供了两个关键的绘制时刻

首次绘制 (FP)：渲染任何内容的时间。请注意，首次绘制的标记是可选的，并非所有用户代理都会报告它。
首次内容绘制 (FCP)：渲染 DOM 文本或图像内容的第一部分的时间。

第三个关键的绘制时刻由 LargestContentfulPaint API 提供

最大内容绘制 (LCP)：从页面开始加载时记录的，视窗中可见的最大图像或文本块的渲染时间。

此 API 提供的数据可以帮助您最大限度地缩短用户在看到网站内容开始显示之前等待的时间。缩短这些关键绘制时刻出现的时间，可以让网站对用户感觉更具响应性、性能更高且更具吸引力。

与其他 Performance API 一样，此 API 扩展了 PerformanceEntry.

实例属性

此接口没有属性，但它通过如下方式对以下 PerformanceEntry 属性进行限定和约束，从而扩展了这些属性

PerformanceEntry.entryType: 返回“paint”。
PerformanceEntry.name: 返回 "first-paint" 或 "first-contentful-paint"。
PerformanceEntry.startTime: 返回绘制发生时的 时间戳.
PerformanceEntry.duration: 返回 0。

实例方法

此接口没有方法。

示例

获取绘制计时

使用 PerformanceObserver 的示例，它会在浏览器性能时间线中记录新的 paint 性能条目时发出通知。使用 buffered 选项可以访问观察者创建之前存在的条目。

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 性能条目

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

LargestContentfulPaint