PerformanceElementTiming: renderTime 属性

一个表示元素渲染时间的 DOMHighResTimeStamp。

对于图像，这将是图像渲染时间戳。它定义为图像完全加载后发生的下一个绘制操作。如果时间允许检查失败（如 Timing-allow-origin 标头所定义），则此属性将返回 0。

对于文本节点，这将是文本渲染时间戳。它定义为元素文本绘制完成的时间。

在此示例中，一个 <img> 元素通过添加 elementtiming 属性进行观察。注册了一个 PerformanceObserver 来获取所有类型为 "element" 的性能条目，并且使用 buffered 标志访问观察器创建之前的日期。调用 entry.renderTime 返回图像元素的渲染时间。

<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.renderTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });

出于安全原因，如果资源是跨源请求，则 renderTime 属性的值为 0。要公开跨源渲染时间信息，需要设置 Timing-Allow-Origin HTTP 响应标头。

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

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

或者，您可以使用 startTime，如果它不为 0，则返回条目的 renderTime 值，否则返回此条目的 loadTime 值。但是，建议设置 Timing-Allow-Origin 标头，以便度量指标更准确。

如果使用 startTime，可以通过检查是否使用了 renderTime 来标记任何不准确之处

const isRenderTime = entry.renderTime ? true : false;