Element Timing 关键元素渲染观测：elementtiming 与自定义指标实践

背景与价值LCP 无法覆盖所有关键元素；自定义打点可更精细地观测业务核心内容的呈现时机。标注关键元素<img src="/hero.jpg" elementtiming="hero"> <h1 elementtiming="title">标题</h1> 采集与上报function observeElements() { const po = new PerformanceObserver(list => { for (const e of list.getEntries()) report(e.name, e.startTime); }); po.observe({ type: 'element', buffered: true } as any); } 指标验证（Chrome 128/Edge 130）采集覆盖率：关键元素打点命中 ≥ 98%。优化收益：依据打点进行资源治理后，呈现时间降低 100–220ms。回退策略不支持环境：保留 LCP 与首屏业务打点；采用 IntersectionObserver 近似替代。测试清单多元素与动态内容：打点唯一性与时序正确；上报通路稳定。