LargestContentfulPaint: renderTime 属性

值

renderTime 属性可以具有以下值：

• 一个 timestamp，表示元素渲染到屏幕的毫秒数。
• 如果资源是跨域请求且未使用 Timing-Allow-Origin HTTP 响应头，则为 0 或一个粗略化的 timestamp。

跨域图片渲染时间

出于安全原因，如果资源是跨域请求，renderTime 属性的值最初为 0。

现在，浏览器 可能会在这些情况下暴露稍微粗略化的渲染时间。请查看 浏览器支持。

要公开更准确的跨域渲染时间信息，需要设置 Timing-Allow-Origin HTTP 响应头。

例如，要允许 https://mdn.org.cn 查看准确的 renderTime，跨域资源应发送：

Timing-Allow-Origin: https://mdn.org.cn

使用 startTime 而不是 renderTime

无论 renderTime 的准确性如何，开发者都应使用 startTime 而不是 renderTime 作为 LCP 时间。它会返回条目的 renderTime 值（如果它不为 0），否则返回此条目的 loadTime 值，从而无需为不支持的浏览器检查 0 值。

示例

记录最大内容绘制的渲染时间

此示例使用 PerformanceObserver，在浏览器性能时间线上记录新的 largest-contentful-paint 性能条目时进行通知。buffered 选项用于访问观察者创建之前的条目。

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.renderTime);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

规范

浏览器兼容性