如何用HTML代码使用elementtiming检测加载-html教程-PHP中文网

element timing api 是浏览器原生性能监控接口，用于捕获带 elementtiming 属性的替换元素（如 img、video）首次渲染到屏幕的时间点 rendertime，需 javascript 调用 performance.getentriesbytype('element') 获取，仅 chrome 98+ 和 edge 98+ 支持。

如何用html代码使用elementtiming检测加载

elementtiming 是什么，它能检测什么

Element Timing API 不是 HTML 属性或标签，而是一个浏览器原生性能监控接口，必须用 JavaScript 调用 performance.getEntriesByType('element') 获取元素渲染时机。HTML 本身无法“使用”它——你不能在 <div timing="true"> 这类地方加属性让它自动生效。 <p>它的作用是捕获指定元素（比如带 <code>elementtiming 属性的 <img> 或 <video></video>）首次绘制到屏幕的时间点（renderTime），但前提是该元素被显式标记且满足渲染条件。

如何正确标记元素以触发 elementtiming 记录

必须给目标元素添加 elementtiming 属性，值为任意非空字符串（如 "hero-image"），且该元素需满足：是块级/替换元素（<img>、<video></video>、<iframe></iframe>、<svg></svg> 等），并且已渲染（不处于 display: none 或未插入 DOM 的状态）。

elementtiming 是纯字符串标识符，不是布尔值 —— 写成 elementtiming="true" 和 elementtiming="logo" 效果一样
动态插入的元素（如 JS 创建后 append）也支持，但需确保插入后已 layout + paint，否则可能拿不到 renderTime
<div elementtiming="main-content"> 默认不会被记录，因为 <code><div> 不是替换元素；可改用 <code><img> 或加 content-visibility: auto 配合强制触发（但不可靠）
怎么用 JavaScript 读取 elementtiming 数据

调用 performance.getEntriesByType('element') 只能在元素完成渲染后执行，太早（比如 DOMContentLoaded 时）会返回空数组；建议监听 load 事件或使用 requestIdleCallback 延迟采集。

示例：

javascript-pro
专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载
```
function logElementTimings() {
  const entries = performance.getEntriesByType('element');
  entries.forEach(entry => {
    console.log(entry.name, entry.startTime, entry.renderTime);
  });
}
window.addEventListener('load', logElementTimings);
```
注意：renderTime 是高精度时间戳（单位毫秒），表示该元素像素首次出现在屏幕上的时刻；startTime 是该元素开始加载的时间（对 <img> 来说接近 fetchStart）。

常见失败原因和兼容性坑

Chrome 98+、Edge 98+ 支持，Firefox 和 Safari 完全不支持 —— 如果你在 Safari 控制台看到空数组，不是代码写错，是浏览器根本不实现这个 API。
- 元素没渲染就查：比如在 document.write 或 SSR 渲染后立即调用 getEntriesByType，结果为空
- 用了 visibility: hidden 或 opacity: 0：元素仍可能被记录（只要 layout/paint 发生），但 renderTime 可能早于用户实际可见时间
- 重复标记同名元素（如多个 elementtiming="banner"）：所有都会被记录，entry.name 相同，靠 entry.element 引用区分
- 没有开启 PerformanceObserver：虽然 getEntriesByType 可用，但想实时监听新 entry 必须用 PerformanceObserver 订阅 'element' 类型
真正起作用的永远是 JS + 元素标记 + 浏览器支持三者同时满足，HTML 只负责提供那个 elementtiming 属性位置。漏掉任一环，控制台里就看不到数据。