不能靠paint条目查单个元素渲染时间，因其仅报告帧级绘制时间点（如first-paint），不携带DOM引用；需通过largest-contentful-paint的entry.element或performance.mark()/measure()手动打点绑定具体节点。
直接监听 paint 类型无法定位单个元素的渲染耗时，必须结合 largest-contentful-paint 的 entry.element 或手动打点 performance.mark() + performance.measure() 才能关联到具体 DOM 节点。
为什么不能靠 paint 条目查某个元素的渲染时间
paint 类型只报告浏览器绘制帧的时间点（如 first-paint、first-contentful-paint），不携带任何 DOM 元素引用。它告诉你“页面某帧画出来了”，但不告诉你“哪个 <div> 在这一帧里被渲染”。
- 常见错误：监听
paint后遍历entryList.getEntries()，试图用entry.name === 'first-contentful-paint'反推某个组件的渲染耗时 —— 这只能得到全局首帧时间，和目标元素无关 -
entry.startTime是帧级时间戳，不是元素级生命周期事件 - 即使元素在 FCP 帧中首次出现，也无法从
paint条目反向定位其 DOM 节点
怎么拿到具体元素的渲染完成时间
只有两类方式能真正绑定到元素：一是利用 LCP 自动选中的最大内容元素，二是主动为关键节点打标记。
- 对 LCP 元素：监听
largest-contentful-paint类型，取entry.element，再用entry.startTime得到该元素渲染完成时刻 - 对非 LCP 元素（比如弹窗、懒加载卡片）：在插入 DOM 后、样式应用完成前调用
performance.mark('card-inserted')；在requestAnimationFrame回调中确认渲染就绪后，再打performance.mark('card-render-ready')；最后用performance.measure('card-render', 'card-inserted', 'card-render-ready') - 避免在打点前后读取
offsetHeight或getBoundingClientRect()，否则会强制同步 layout，污染测量结果
largest-contentful-paint 的 entry.element 为什么有时是 null
不是所有 LCP 候选元素都能返回有效 DOM 引用，尤其当元素位于跨域 iframe 或 Shadow DOM 内部时。
立即学习“前端免费学习笔记（深入）”；
- 跨域 iframe 中的
<img>触发 LCP，entry.element为null，但entry.url仍可提供资源路径 - Shadow DOM 内部的
<h2>若未显式暴露给主文档，entry.element也可能为空；此时需在connectedCallback中主动打点 - 纯 CSS 背景图触发 LCP 时，
entry.element是应用该样式的宿主元素，但若样式来自@import或动态插入的<style>，可能延迟解析导致element暂时不可用
上线监控时容易漏掉的关键细节
生产环境采集 LCP 元素信息时，90% 的失败源于注册时机或类型拼写错误。
-
largest-contentful-paint必须写全小写连字符形式，写成lcp或largestContentfulPaint都不会触发回调 - 注册代码必须放在
<head>最顶部的内联<script>中，加defer或等DOMContentLoaded就永远收不到首屏 LCP - SPA 路由切换后，旧 observer 不会自动监听新页面的 LCP，必须在路由就绪后重新调用
observe()（注意先disconnect()） - 移动端 WebView（尤其 Android 10 以下）可能不支持该类型，需 fallback 到
performance.getEntriesByType('navigation')[0].domContentLoadedEventEnd粗略估算
