直接调用 performance.getentriesbytype("resource") 获取资源记录，按 initiatortype 和 name 筛选目标静态资源，通过 domainlookupend−domainlookupstart、connectend−connectstart、responsestart−requeststart、responseend−responsestart 等差值提取各网络阶段耗时，可精准诊断传输效率；需在 load 事件中执行，注意跨域资源需服务端配置 timing-allow-origin 头。
直接用 performance.getEntriesByType("resource") 获取所有资源记录，再按类型、URL 或 initiatorType 筛选目标静态资源，就能拿到它在各网络阶段的精确耗时数据。
定位目标资源的关键字段
ResourceTiming 对象里有几个核心属性帮你锁定和识别资源：
- name：完整请求 URL，适合精确匹配某张图片或某个 JS 文件
-
initiatorType：标识资源触发方式，比如
"img"、"script"、"link"、"fetch" -
entryType：固定为
"resource"，用于过滤类型 - startTime：浏览器开始处理该请求的时间戳（相对 navigationStart）
提取传输效率相关阶段耗时
真正反映“下载传输效率”的是网络链路层面的几个关键差值，不是总耗时。重点关注：
- domainLookupEnd − domainLookupStart：DNS 查询耗时
- connectEnd − connectStart：TCP 连接建立时间（含 TLS 握手）
- responseStart − requestStart：网络传输耗时（服务器响应 + 数据下行时间）
- responseEnd − responseStart：实际内容接收时长（即纯下载时间）
例如，若 responseEnd − responseStart 明显偏高，说明资源体本身大或带宽受限；若 connectEnd − connectStart 长，可能需检查 HTTPS 配置或 CDN 节点距离。
写一段可运行的诊断脚本
页面加载完成后，筛选出某张关键图片并打印其传输细节：
function logImageTiming() {
const entries = performance.getEntriesByType("resource");
const target = entries.find(e =>
e.initiatorType === "img" && e.name.includes("hero-banner.jpg")
);
if (target) {
console.table({
"DNS": (target.domainLookupEnd - target.domainLookupStart).toFixed(1),
"TCP+TLS": (target.connectEnd - target.connectStart).toFixed(1),
"Server+Network": (target.responseStart - target.requestStart).toFixed(1),
"Download": (target.responseEnd - target.responseStart).toFixed(1),
"Total": (target.duration).toFixed(1)
});
}
}
// 建议在 load 或 pageshow 事件中调用
window.addEventListener("load", logImageTiming);注意采集时机和兼容性
ResourceTiming 数据只在资源加载完成之后才可用，且默认只保留前 150 条（可通过 performance.setResourceTimingBufferSize() 扩容）。另外，跨域资源若未配置 Timing-Allow-Origin 响应头，大部分字段会置为 0，仅保留 startTime 和 duration。所以分析第三方资源前，务必确认服务端已正确设置该头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
