PerformanceElementTiming - 报告有关页面标识的特定元素的计时信息

PerformanceElementTiming 是 Element Timing API 的接口，报告有关页面作者标识的特定元素的计时信息。例如，它可以报告有关文章中主图像的时间信息。

属性

PerformanceElementTiming.element 只读

一个 Element，表示我们正在返回信息的元素。

PerformanceElementTiming.id 只读

一个 DOMString，它是元素的 id 。

PerformanceElementTiming.identifier 只读

一个 DOMString，它是元素上 elementtiming 属性的值。

PerformanceElementTiming.intersectionRect 只读

一个 DOMRectReadOnly，表示视口内元素的矩形。

PerformanceElementTiming.loadTime 只读

一个 DOMHighResTimeStamp，表示元素的加载时间。

PerformanceElementTiming.naturalHeight 只读

一个无符号的 32 位整数（unsigned long），如果是应用于图像，则它是图像的原始高度，如果是文本则为 0。

PerformanceElementTiming.naturalWidth 只读

一个无符号的 32 位整数（无符号长整型），如果是应用于图像，则为图像的原始宽度，如果是文本则为 0。

PerformanceElementTiming.renderTime 只读

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

PerformanceElementTiming.url 只读

一个 DOMString，表示图像资源请求的初始 URL，如果是文本则为 0。

方法

PerformanceElementTiming.toJSON()

生成对象的 JSON 描述。

实例

在这个例子中，我们有两个正在被观察的元素。我们使用 PerformanceObserver 接口来创建性能测量事件列表。在我们的例子中，通过设置 PerformanceEntry.entrytype 为 element，来使用 PerformanceElementTiming 接口。

两个条目将输出到控制台。第一个包含图像的详细信息，第二个包含文本节点的详细信息。

<img src="image.jpg" elementtiming="big-image">
<p elementtiming="text" id="text-id">text here</p>

const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
      console.log(entry);
  });
});
observer.observe({ entryTypes: ["element"] });

规范

规范
Element Timing API sec-performance-element-timing

桌面浏览器兼容性

暂无兼容数据