Element Timing API 能精确捕获元素首次渲染的毫秒时刻，仅支持 img、svg、video、iframe 及带 elementtiming 属性的元素；需提前启用 PerformanceObserver 并确保元素满足可见性前提。
Element Timing API 能直接告诉你“头图什么时候真正出现在屏幕上”，不是加载完成、不是 JS 执行完，而是用户眼睛能看见它的那个精确毫秒点。关键不在测时间长度，而在捕获那个首次绘制（first paint）的时刻。
哪些元素可以被标记和测量
只有明确支持的元素类型才能触发 PerformanceElementTiming 条目：
- img 标签（含 src 或 srcset 的图片）
- svg 元素（需有实际渲染内容，空 svg 不计入）
- video（首帧或 poster 帧可见时）
- iframe（其主文档完成首次绘制时）
- 任意元素（div、p、h1 等），但必须显式添加 elementtiming 属性
注意：纯文本节点本身不直接支持，但可通过包裹它的 <p elementtiming="hero-text"></p> 来间接测量；CSS 伪元素、::before/::after、背景图（background-image）均无法被该 API 捕获。
正确打标记的两个硬性要求
标记失效的最常见原因就是漏掉以下任一条件：
- 目标元素必须带有 elementtiming 属性，且值为合法字符串（如
elementtiming="hero-banner"，不能含空格、引号或特殊符号） - PerformanceObserver 必须在元素插入 DOM 前或同时启动；如果页面已加载完毕再调用
observe()，已渲染的元素不会上报（动态插入的新元素除外）
示例写法：
<img src="hero.jpg" elementtiming="hero-image" alt="如何通过 Element Timing API 测量页面关键元素（如头图）的真实渲染时刻" ><h1 elementtiming="hero-title">欢迎来到首页</h1>
监听并获取真实渲染时间
使用 PerformanceObserver 监听 element 类型条目，核心数据在 entry.startTime：
-
entry.name就是elementtiming属性的值（如"hero-image"） -
entry.startTime是相对于navigationStart的毫秒数，代表该元素首次渲染的确切时刻 -
entry.duration恒为 0——这是规范定义，不是错误，无需关注 - 可选开启
buffered: true，确保捕获到页面加载过程中已发生的条目
基础监听代码：
const observer = new PerformanceObserver(list => {<br>
list.getEntries().forEach(entry =><br>
console.log(`${entry.name} 渲染于 ${entry.startTime}ms`)<br>
);<br>
});<br>
observer.observe({ entryTypes: ['element'], buffered: true });
验证是否真被渲染出来
仅靠日志还不够，要确认“它真的画出来了”，可结合两个事实判断：
- 检查
entry.intersectionRect：若该对象存在且 width × height > 0，说明元素至少部分在视口内且已绘制 - 比对多个关键元素的
startTime：例如 banner 图应早于下方正文段落，顺序颠倒可能意味着 CSS 阻塞、JS 动态插入延迟或 visibility/opacity 设置异常 - 注意可绘制前提：元素及其所有祖先
opacity > 0、visibility: visible，且未被display: none或overflow: hidden完全裁剪
