Element Timing API - 用于监控大型图像元素和文本节点的加载性能

Element Timing API（元素计时 API）提供了用于监控大型图像元素和文本节点在屏幕上出现时的加载性能的功能。

概念和用法

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

该 API 支持 <img> 元素、<svg> 内的 <image> 元素、<video> 元素的封面，具有 background-image 的元素，以及文本节点组，例如 <p>。

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

接口

PerformanceElementTiming

报告有关一个关联元素的计时信息。

实例

在这个例子中，我们有两个元素正在被观察。我们使用 PerformanceObserver 接口来创建一个性能测量事件的列表，在我们的例子中观察的 PerformanceEntry.entrytype 为 element，以便使用 Element Timing API 中的 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"] });

规范

规范	状态	备注
Unknown	Unknown	初始定义。

浏览器兼容性

PerformanceElementTiming

桌面浏览器兼容性

暂无兼容数据

相关链接

• PerformanceFrameTiming
• PerformanceNavigationTiming
• PerformanceResourceTiming
• PerformanceMark
• PerformanceMeasure
• PerformancePaintTiming
• PerformanceLongTaskTiming