PerformanceElementTiming: renderTime 属性

值

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

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

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

示例

记录 renderTime

在此示例中，通过添加 elementtiming 属性来观察一个 <img> 元素。已注册一个 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。相反，应使用 loadTime 属性作为回退。

浏览器现在可能会在这些情况下公开略微粗略的渲染时间。请检查浏览器支持。

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

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

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

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

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

const isRenderTime = Boolean(entry.renderTime);

规范

浏览器兼容性