PerformanceElementTiming

描述

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

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

• <img> 元素；
• <svg> 内的 <image> 元素；
• <video> 元素的 海报图像；
• 具有有效 URL 值的 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，表示元素的加载时间。

PerformanceElementTiming.naturalHeight 只读 实验性

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

PerformanceElementTiming.naturalWidth 只读 实验性

一个无符号 32 位整数（unsigned long），如果是应用于图像，则为图像的固有宽度；如果是文本，则为 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 属性