Resource Timing API 不支持实时监听新增 DOM 资源，但可通过 PerformanceObserver 异步捕获全部资源条目，结合 initiatorType、duration 等字段分阶段分析 DNS、TCP、TTFB、下载等瓶颈，并通过 data-perf-id 或 traceId 关联 DOM 元素实现精准归因。
Resource Timing API 本身不支持“监听新增 DOM 资源”的实时触发，但它能异步获取已加载资源的完整时序数据——关键在于在合适时机主动采集，并结合 DOM 变化做增量分析。不需要轮询或 MutationObserver 驱动 API 调用，浏览器已在后台自动记录所有符合条件的资源条目。
何时调用 getEntriesByType('resource') 才能捕获全部资源
资源条目在加载完成（即 responseEnd 触发）后才被写入 performance entry buffer。因此必须等资源实际加载完毕再读取，常见可靠时机有：
- window.addEventListener('load', ...)：确保 HTML、CSS、JS、图片等初始资源全部加载完成
- PerformanceObserver + 'resource' 类型：推荐方式，可异步监听新条目进入缓冲区（包括动态插入的 img/script/link）
- setTimeout(..., 0) 或 requestIdleCallback：适用于需在渲染后立即采集，又不想阻塞主线程的场景
用 PerformanceObserver 实现真异步监控
相比一次性调用 getEntriesByType，PerformanceObserver 是响应式、无遗漏、低侵入的方案，尤其适合监控动态插入的资源（如 JS 创建的 、、fetch 加载的字体等）：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.entryType === 'resource') {
console.log(`${entry.name} 加载完成`, {
initiatorType: entry.initiatorType, // script / img / link / fetch ...
duration: entry.duration,
dns: entry.domainLookupEnd - entry.domainLookupStart,
tcp: entry.connectEnd - entry.connectStart,
ttfb: entry.responseStart - entry.requestStart,
download: entry.responseEnd - entry.responseStart
});
}
});
});
<p>// 开始监听，buffered: true 表示把历史已加载资源也吐出来
observer.observe({ entryTypes: ['resource'], buffered: true });识别瓶颈的关键字段与判断逻辑
单看 duration 不足以定位问题。应分阶段比对时间差，并关注零值异常：
- DNS 慢：domainLookupEnd - domainLookupStart > 100ms，且 connectStart > domainLookupEnd → DNS 解析卡住
- TCP/SSL 延迟高：connectEnd - connectStart > 200ms，或 secureConnectionStart > 0 但 secureConnectionStart 到 connectEnd 过长 → SSL 握手慢
- 服务器响应慢（TTFB）：responseStart - requestStart > 500ms，且 redirectEnd === redirectStart → 后端处理或网络路由问题
- 下载慢：responseEnd - responseStart 显著大于资源体积 ÷ 网络带宽预估 → 可能受限于并发连接数或 CDN 节点
- 资源被阻塞：fetchStart 与 startTime 差值大，或 initiatorType === 'script' 但 resource.name 是图片 → JS 同步执行阻塞了后续资源解析
关联 DOM 元素做精准归因
Resource Timing 提供 initiatorType 和 name，但无法直接拿到对应 DOM 节点。可通过以下方式补全：
- 对 script/link/img 标签手动打标记：
<img data-perf-id="hero-banner" src="..." alt="如何利用 Resource Timing API 异步监控每一个 DOM 资源的加载细节与瓶颈" >，然后在 observer 回调中匹配 entry.name 包含该字符串 - 利用
performance.getEntriesByName(url)获取特定资源条目，再结合 DOM 查询定位（适合已知 URL 的关键资源） - 对动态创建资源统一加 traceId：
const img = new Image(); img.src = '/a.png?trace=home-01';，后续按 query 参数过滤 entry.name
