如何利用 Resource Timing API 异步监控每一个 DOM 资源的加载细节与瓶颈-js教程-PHP中文网

Resource Timing API 不支持实时监听新增 DOM 资源，但可通过 PerformanceObserver 异步捕获全部资源条目，结合 initiatorType、duration 等字段分阶段分析 DNS、TCP、TTFB、下载等瓶颈，并通过 data-perf-id 或 traceId 关联 DOM 元素实现精准归因。

如何利用 resource timing api 异步监控每一个 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 });</p>

识别瓶颈的关键字段与判断逻辑

单看 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 标签手动打标记：，然后在 observer 回调中匹配 entry.name 包含该字符串
利用 performance.getEntriesByName(url) 获取特定资源条目，再结合 DOM 查询定位（适合已知 URL 的关键资源）
对动态创建资源统一加 traceId：const img = new Image(); img.src = '/a.png?trace=home-01';，后续按 query 参数过滤 entry.name