直接调用performance.getentriesbytype('resource')仅返回已完成加载的资源，必须拆解dns、tcp、ttfb等阶段差值定位瓶颈；duration仅含responseend-starttime，忽略重定向、dns、连接等前置环节，易误判根因；跨域资源需timing-allow-origin头才提供完整时序，否则关键字段为0；动态未加载资源和沙箱环境（缺allow-performance权限）下数据不可见。
直接调用 performance.getEntriesByType('resource') 只能拿到已完成加载的资源快照，但真正影响用户体验的瓶颈往往藏在 DNS、TCP、TTFB 这些阶段差值里——不拆解，就等于没分析。
为什么不能只看 duration 字段
duration 是 responseEnd - startTime，它跳过了重定向、DNS、连接、SSL 握手等前置环节。一个第三方脚本 duration 是 1200ms，实际可能 DNS 就花了 480ms、TLS 握手占了 320ms，而 body 下载只用了 150ms。只盯着 duration 容易误判为“资源太大”，结果却去压缩 JS，白忙一场。
- 若
entry.redirectStart > 0，说明发生了重定向，应检查是否可消除跳转链 - 若
entry.domainLookupStart === 0，通常表示 DNS 缓存命中，不是数据缺失 - 若
entry.secureConnectionStart > 0且connectEnd - connectStart显著偏高，说明 TLS 握手是瓶颈，需考虑会话复用或 OCSP stapling
跨域资源字段为 0 的真实原因和验证方式
跨域资源（如 CDN 上的 https://cdn.example.com/script.js）若服务端未返回 Timing-Allow-Origin 响应头，浏览器会将 domainLookupStart、connectStart 等字段置为 0，但 name、startTime、duration 仍保留。这不是 bug，而是隐私保护机制。
- 用浏览器开发者工具 → Network 面板，选中该资源 → Headers 标签页，确认响应头含
Timing-Allow-Origin: *或明确域名 - 若字段全为 0 且
entry.initiatorType === 'script'，大概率是跨域 + 缺头；若同域资源也全为 0，则可能是沙箱 iframe 缺allow-performance - 不要用
entry.duration和entry.startTime推算其他阶段——这些字段在跨域下已不可信
如何捕获动态插入但尚未完成加载的资源
performance.getEntriesByType('resource') 只返回已结束加载的条目。通过 document.createElement('script').src = url 插入的脚本，若在 window.addEventListener('load', ...) 时还未完成 fetch，就不会出现在结果里——这会导致监控漏报。
- 必须搭配
PerformanceObserver，且启用buffered: true：它能回溯已触发但尚未被读取的 resource 条目 - observer 注册要尽早，在
内同步执行，不能 defer、不能 async、不能等 DOMContentLoaded - 过滤时别只信
initiatorType === 'script'，有些 SDK 是 fetch + eval，得结合 URL 关键词匹配，例如r.name.includes('sentry') || r.name.includes('bugsnag')
沙箱环境（iframe/微前端）下 resource 数据为空怎么办
沙箱 iframe 默认禁用 Performance API 的资源采集能力，performance.getEntriesByType('resource') 返回空数组不是代码问题，而是策略限制。
- iframe 标签必须显式声明
sandbox="allow-scripts allow-performance"（Chrome 98+ 支持，Firefox 当前不支持） - 父页面无法监听子 iframe 的 resource 条目，observer 必须在沙箱上下文内注册
- 即使开了权限，跨域资源仍需服务端配
Timing-Allow-Origin，否则整条 entry 会被丢弃（比普通跨域更严格） - 避免在沙箱内用
eval()或new Function()加载脚本——这类执行不触发 resource entry，也无法被 observer 捕获
真正难的不是拿到数据，而是判断哪些字段可信、哪些阶段被缓存跳过、哪些资源根本没进 performance buffer。尤其在微前端或 iframe 场景下，权限、头配置、observer 注册时机三者缺一不可——漏掉任意一个，看到的就只是假阴性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
