Element Timing API 是浏览器原生性能监控接口，用于捕获带 elementtiming 属性的替换元素（如 img、video）首次渲染到屏幕的时间点 renderTime，需 JavaScript 调用 performance.getEntriesByType('element') 获取，仅 Chrome 98+ 和 Edge 98+ 支持。
elementtiming 是什么，它能检测什么
Element Timing API 不是 HTML 属性或标签，而是一个浏览器原生性能监控接口，必须用 JavaScript 调用 performance.getEntriesByType('element') 获取元素渲染时机。HTML 本身无法“使用”它——你不能在 <div timing="true"> 这类地方加属性让它自动生效。
它的作用是捕获指定元素（比如带 elementtiming 属性的 <img> 或 <video>）首次绘制到屏幕的时间点（renderTime），但前提是该元素被显式标记且满足渲染条件。
如何正确标记元素以触发 elementtiming 记录
必须给目标元素添加 elementtiming 属性，值为任意非空字符串（如 "hero-image"），且该元素需满足：是块级/替换元素（<img>、<video>、<iframe>、<svg> 等），并且已渲染（不处于 display: none 或未插入 DOM 的状态）。
-
elementtiming是纯字符串标识符，不是布尔值 —— 写成elementtiming="true"和elementtiming="logo"效果一样 - 动态插入的元素（如 JS 创建后 append）也支持，但需确保插入后已 layout + paint，否则可能拿不到
renderTime -
<div elementtiming="main-content">默认不会被记录，因为<div>不是替换元素；可改用<img>或加content-visibility: auto配合强制触发（但不可靠）
怎么用 JavaScript 读取 elementtiming 数据
调用 performance.getEntriesByType('element') 只能在元素完成渲染后执行，太早（比如 DOMContentLoaded 时）会返回空数组；建议监听 load 事件或使用 requestIdleCallback 延迟采集。
立即学习“前端免费学习笔记（深入）”；
示例：
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 属性位置。漏掉任一环，控制台里就看不到数据。
