PerformanceElementTiming

元素计时 API 的目标是让 Web 开发人员或分析工具能够测量页面上关键元素的渲染时间戳。

API 支持以下元素的计时信息

• <img> 元素，
• <image> 元素位于 <svg> 内部，
• 海报 图像的 <video> 元素，
• 具有 background-image 的元素，以及
• 文本节点组，例如 <p>。

作者通过在元素上添加 elementtiming 属性来标记要观察的元素。

PerformanceElementTiming 继承自 PerformanceEntry。

此接口通过以下方式限定了事件计时性能条目类型的以下 PerformanceEntry 属性，从而扩展了这些属性

PerformanceEntry.duration 只读 实验性

始终返回 0，因为 duration 不适用于此接口。

PerformanceEntry.entryType 只读 实验性

始终返回 "element"。

PerformanceEntry.name 只读 实验性

对于图像返回 "image-paint"，对于文本返回 "text-paint"。

PerformanceEntry.startTime 只读 实验性

如果此条目的 renderTime 不为 0，则返回该值，否则返回此条目的 loadTime 的值。

此接口还支持以下属性

PerformanceElementTiming.element 只读 实验性

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

PerformanceElementTiming.id 只读 实验性

一个字符串，表示元素的 id。

PerformanceElementTiming.identifier 只读 实验性

一个字符串，表示元素上 elementtiming 属性的值。

PerformanceElementTiming.intersectionRect 只读 实验性

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

PerformanceElementTiming.loadTime 只读 实验性

一个 DOMHighResTimeStamp，表示元素的 loadTime。

PerformanceElementTiming.naturalHeight 只读 实验性

一个无符号 32 位整数（无符号长整型），如果应用于图像，则表示图像的固有高度，对于文本则为 0。

PerformanceElementTiming.naturalWidth 只读 实验性

一个无符号 32 位整数（无符号长整型），如果应用于图像，则表示图像的固有宽度；对于文本，则为 0。

PerformanceElementTiming.renderTime 只读 实验性

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

PerformanceElementTiming.url 只读 实验性

一个字符串，表示图像资源请求的初始 URL，对于文本，则为 0。

PerformanceElementTiming.toJSON() 实验性

返回 PerformanceElementTiming 对象的 JSON 表示形式。

在此示例中，通过添加 elementtiming 属性来观察两个元素。注册一个 PerformanceObserver 来获取所有类型为 "element" 的性能条目，并使用 buffered 标志访问观察器创建之前的數據。

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

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

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

• elementtiming HTML 属性