performance.getEntriesByType("resource") 返回 PerformanceResourceTiming 对象数组，含 startTime、fetchStart、connectStart、requestStart、responseStart、responseEnd、duration 等完整时序字段，可据此计算 DNS、TCP、TTFB、内容下载等各阶段耗时，但跨域资源需服务端配置 Timing-Allow-Origin 才能获取非零网络阶段值。
performance.getEntriesByType("resource") 能拿到哪些时间字段
它返回的是 PerformanceResourceTiming 对象数组，每个对象包含完整的资源加载时序数据，不是简单的一个耗时数字。关键字段有：startTime（相对页面开始时间）、duration（总耗时）、fetchStart、connectStart、requestStart、responseStart、responseEnd 等。这些才是分析“具体耗时分布”的基础。
注意：duration = responseEnd - startTime，但真正想拆解 DNS、TCP、TLS、请求发送、首字节、内容下载等阶段，必须用差值计算，比如 TLS 耗时 ≈ secureConnectionStart - connectStart（仅 HTTPS），而 secureConnectionStart 在 HTTP 页面里是 0 或 undefined。
为什么直接调用常拿不到完整资源列表
因为 performance.getEntriesByType("resource") 只返回当前 performance buffer 中已记录的条目。页面刚加载时，很多资源可能还没完成加载或还没被记录；如果在 load 事件后立刻调用，又可能漏掉异步加载的资源（如懒加载图片、动态 import 的 chunk）。
- 推荐时机：在
pageshow事件中调用（含缓存恢复场景），或结合MutationObserver+PerformanceObserver持续监听 - 更稳妥的做法是用
PerformanceObserver监听"resource"类型，确保不漏掉后续资源 - 注意浏览器默认 buffer 大小有限（通常 150 条），高频资源加载可能被丢弃，可通过
performance.setResourceTimingBufferSize(500)提前扩容
如何按阶段分组统计耗时分布（实用代码片段）
别只算平均值，要分桶看分布。例如把 responseEnd - responseStart（即内容下载耗时）按 [0–100ms, 100–500ms, 500–1000ms, >1000ms] 分组：
const resources = performance.getEntriesByType("resource");
const downloadDurations = resources
.filter(r => r.responseStart > 0 && r.responseEnd > r.responseStart)
.map(r => r.responseEnd - r.responseStart);
<p>const buckets = { '<100': 0, '100-500': 0, '500-1000': 0, '>1000': 0 };
downloadDurations.forEach(ms => {
if (ms < 100) buckets['<100']++;
else if (ms < 500) buckets['100-500']++;
else if (ms < 1000) buckets['500-1000']++;
else buckets['>1000']++;
});
同理可对 connectEnd - connectStart（TCP 连接）、requestStart - fetchStart（排队+DNS）等做类似分组。注意判空：很多字段在跨域资源上是 0 或 0 值（受 CORS 影响），需提前过滤或用 timingAllowOrigin 配置服务端响应头。
CORS 资源导致大量字段为 0 怎么办
这是最常踩的坑。只要资源响应头没带 Timing-Allow-Origin: *（或指定域名），浏览器就会抹掉 PerformanceResourceTiming 中除 startTime、duration、name、initiatorType 外的所有高精度字段，全部变成 0。
- 检查方式：取一个跨域资源，打印
r.connectStart === 0 && r.responseStart === 0，若为 true 就是 CORS 问题 - 前端无法绕过，必须后端配合添加响应头；CDN 或静态资源托管服务（如 Cloudflare、S3+CloudFront）需单独配置
- 第三方脚本、字体、埋点接口等容易被忽略，建议用
resources.filter(r => r.initiatorType === "xmlhttprequest" || r.initiatorType === "fetch")单独筛查
没有 Timing-Allow-Origin，所谓“具体耗时分布”就只剩 duration 和 initiatorType，其他都不可信。
