performance.getEntriesByType("resource") 返回已完成加载的资源对应的 PerformanceResourceTiming 对象数组，含 DNS 查询、TCP 连接、请求响应等完整时间戳，但缓存或跨域资源可能字段缺失或为 0。
performance.getEntriesByType("resource") 返回什么数据
它返回一个 PerformanceResourceTiming 对象数组，每个对象对应一个已加载完成的资源（如 script、img、css、fetch 请求等），包含从 DNS 查询到传输结束的完整时间戳。注意：只有已完成加载的资源才会被记录，动态插入但尚未完成的资源不会出现在结果里。
常见误判点：直接调用 performance.getEntriesByType("resource") 可能为空——因为页面还没加载完，或者资源被缓存且未触发完整 timing（比如强缓存下的 from cache 条目不包含网络阶段时间）。建议在 load 事件后执行，或监听 performance.entryType === "resource" 的 performanceobserver。
如何提取关键耗时字段并避免 NaN
PerformanceResourceTiming 提供了多个高精度时间戳（单位为毫秒，相对于 performance.timeOrigin），但部分字段在缓存或跨域时为 0 或 NaN。重点看这几个字段：
-
startTime：资源请求发起时间（通常与fetchStart相同） -
domainLookupStart/domainLookupEnd：DNS 查询耗时（跨域且未禁用Timing-Allow-Origin才可见） -
connectStart/connectEnd：TCP 连接（含 TLS 握手）耗时 -
requestStart/responseEnd：实际网络传输耗时（含 header + body） -
duration：等价于responseEnd - startTime，即总耗时
⚠️ 容易踩的坑：redirectStart 和 redirectEnd 在无重定向时为 0，但不能直接用减法算重定向耗时（需判断是否 > 0）；跨域资源若服务端没配 Timing-Allow-Origin: *，大部分网络阶段字段会置零，只保留 startTime、responseStart、responseEnd 和 duration。
过滤特定资源类型或 URL 的实操写法
直接遍历数组即可，用 name（完整 URL 字符串）或 initiatorType（如 "img"、"script"、"xmlhttprequest"、"fetch"）筛选：
const resources = performance.getEntriesByType("resource");
const jsFiles = resources.filter(r => r.initiatorType === "script" && r.name.includes("vendor"));
const slowImages = resources
.filter(r => r.initiatorType === "img" && r.duration > 1000)
.map(r => ({ url: r.name, ms: Math.round(r.duration) }));
注意：initiatorType 不是 100% 可靠——比如用 new Image() 创建的图片可能归为 "other"；fetch 请求取决于是否在顶层上下文发起，有时会显示为 "xmlhttprequest"。更稳妥的方式是结合 r.name 正则匹配路径或文件后缀。
为什么 duration 和 responseEnd - startTime 不一定相等
理论上 duration 就是 responseEnd - startTime，但实践中可能有微小差异（通常
- 浏览器内部计时采样精度（尤其在低性能设备上）
-
responseEnd包含 HTTP body 接收完成时间，而某些流式响应（如text/event-stream）可能让该时间点延迟 - 存在重定向时，
startTime是第一次请求的时间，但responseEnd是最后一次响应结束时间，中间跳转过程不参与计算
真正要注意的是：如果 duration 明显小于 responseEnd - startTime（比如差值 > 1ms），大概率说明该资源被拦截、取消或触发了异常终止（如 AbortController 中断 fetch），此时应检查 entryType === "resource" 是否仍存在，以及控制台是否有 net::ERR_ABORTED 类错误。
跨域资源的 timing 数据残缺是常态，别指望靠它精确定位 CDN 延迟；优先关注同源资源和明确配置了 Timing-Allow-Origin 的第三方服务。
