Element Timing API需四者协同：HTML标记elementtiming、元素满足渲染条件、PerformanceObserver在渲染前启用且buffered:true、仅Chromium 98+支持；否则startTime无法获取。
elementtiming 属性本身不触发监控，必须配 PerformanceObserver
HTML 中写 elementtiming="hero" 只是打个标记，浏览器不会自动上报时间。它只是告诉 PerformanceObserver：“这个元素值得被记录”。真正干活的是 JavaScript 的 PerformanceObserver，且必须在元素渲染前或同时启动监听——页面加载完再注册，已渲染的元素就永远漏掉了。
常见错误现象：performance.getEntriesByType('element') 返回空数组，或者只拿到动态插入的新元素，老元素一个没有。根本原因就是 observer 启动太晚。
- 监听代码必须放在
<head>内或内联脚本最顶部，不能等DOMContentLoaded或load事件 - 支持的元素类型有限：只有
<img>、<video>、<svg>、<iframe>，以及显式加了elementtiming属性的块级/替换元素（<div>加了也能记，但得确保它已 layout + paint） -
elementtiming值是字符串标识符，不是布尔值 ——elementtiming="true"和elementtiming="banner"效果完全一样，但后者语义清晰、便于区分
怎么写监听代码才能捕获到 startTime
entry.duration 在 Element Timing API 中恒为 0，这不是 bug，是规范定义。你唯一能用的指标是 entry.startTime，它表示该元素首次绘制完成的时间点（单位毫秒，相对于 navigationStart）。
示例代码要满足两个硬性条件：类型正确、buffered 开关打开（否则可能错过早期条目）：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.name, entry.startTime, entry.duration);
// 输出类似：'hero-image' 1245.3 0
}
});
observer.observe({ entryTypes: ['element'], buffered: true });
-
buffered: true是关键，它让 observer 能读取已发生的条目（比如在 DOM ready 后注册仍能拿到部分早期元素） - 不要依赖
entry.element—— 它在某些浏览器中可能为null，尤其对非替换元素；靠entry.name（即elementtiming值）反查 DOM 更可靠 - 同一页面多个同名
elementtiming值会被分别记录，但名字重复会导致无法区分具体是哪个实例，建议用唯一 ID 或带序号命名，如"hero-1"
为什么 div elementtiming="main" 没有记录？
因为 <div> 默认不是“替换元素”，浏览器不保证为其生成 element 类型性能条目，即使加了 elementtiming 属性。它只在满足特定渲染条件时才被纳入 —— 比如已触发 layout + paint，且未被 display: none、visibility: hidden 或视口外裁剪屏蔽。
实际测试中，纯 <div> 经常拿不到 startTime，尤其当内容为空或样式未触发重绘时。更稳妥的做法是：
- 优先用
<img>或<svg>这类原生支持的替换元素打标 - 若必须监控
<div>，确保它有明确尺寸（如height: 200px）、可见内容、且未被 CSS 隐藏 - 避免依赖
content-visibility: auto强制触发 —— 行为不可靠，Chrome 也不保证一定生成条目 - 可用
getComputedStyle(element).display !== 'none'+element.offsetHeight > 0在回调里做二次校验，过滤掉假阳性
Chrome 98+ 才支持，Edge 98+ 也行，其他浏览器直接不生效
Element Timing API 目前仅 Chrome 和 Edge 基于 Chromium 98+ 版本实现，Firefox、Safari 完全不支持 entryTypes: ['element']。这意味着你在 Safari 控制台里执行 performance.getEntriesByType('element') 会始终返回空数组，不是代码写错了，是浏览器没这个能力。
如果你的业务需要跨浏览器覆盖，不能把所有希望押在 elementtiming 上。替代方案包括：
- 用
PerformanceObserver监听'largest-contentful-paint'，它兼容性更好（Chrome 77+、Firefox 79+、Safari 15.4+） - 对关键节点手动打点：在
requestAnimationFrame回调里检查offsetHeight和getBoundingClientRect()，结合performance.now()记录首帧可见时间 - 白屏监控可走降级路径：用
document.querySelector+offsetHeight+getComputedStyle组合判断是否“真可见”，比依赖 API 更可控
真正容易被忽略的点是：你以为加了属性就万事大吉，其实从标记、渲染、监听、到浏览器支持，四者缺一不可。其中任意一环断开，startTime 就永远不会出现。
