LargestContentfulPaint - 提供了加载页面时最大图像或文字绘画的详细信息

LargestContentfulPaint 是 Largest Contentful Paint API 的接口，提供了加载页面时最大图像或文字绘画的详细信息。在页面加载过程中，该绘画的时间是一个很重要的指标。

属性

LargestContentfulPaint.element

当前最大内容绘制的元素。

LargestContentfulPaint.renderTime

元素渲染到屏幕上的时间。如果元素是没有 Timing-Allow-Origin 标头加载的跨域图像，则可能不可用。

LargestContentfulPaint.loadTime

元素的加载时间。

LargestContentfulPaint.size

返回元素的固有大小（宽度 * 高度）。

LargestContentfulPaint.id

元素的 ID。没有 ID 时，此属性返回一个空字符串。

LargestContentfulPaint.url

如果元素是图像，则为图像的请求 URL。

方法

LargestContentfulPaint.toJSON()

将上述属性作为 JSON 返回。

实例

以下实例说明如何创建一个 PerformanceObserver，以侦听 largest-contentful-paint 条目并将 LCP 值记录到控制台。

这个实例还演示了如何包括缓冲条目（那些在调用 observer() 之前发生的条目），它通过将 buffered 选项设置为 true 来完成的。

请注意，在此实例中，仅当用户离开选项卡时才将数据发送到服务器。

// 捕获错误，因为某些浏览器在使用新的 `type` 选项时会抛出该错误。
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  let lcp;

  const po = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];

    // 使用 `renderTime` 或 `loadTime` 将 lcp 更新为最新值。
    //（注意：如果没有 `Timing-Allow-Origin` 标头，
    // 则 `renderTime` 在跨域加载的图像元素上可能不可用。）
    lcp = lastEntry.renderTime || lastEntry.loadTime;
  });

  po.observe({type: 'largest-contentful-paint', buffered: true});

  // 将数据发送到服务器。
  addEventListener('visibilitychange', function fn() {
    if (lcp && document.visibilityState === 'hidden') {
      console.log('LCP:', lcp);
      removeEventListener('visibilitychange', fn, true);
    }
  }, true);
} catch (e) {
  // 如果浏览器不支持此 API，则什么也不做。
}

规范

规范	状态	备注
Largest Contentful Paint LargestContentfulPaint 的定义	编者的草案	初始定义。

桌面浏览器兼容性

暂无兼容数据