performance.getEntriesByType('resource')可直接获取所有静态资源高精度加载时序，无需埋点；需拆解DNS、TCP、TLS、TTFB、下载等阶段定位瓶颈，并通过Timing-Allow-Origin头支持跨域完整指标采集。
直接用 performance.getEntriesByType('resource') 就能拿到所有 JS、CSS、图片等静态资源的完整加载时序，不用改请求、不加埋点，浏览器自动记录高精度时间戳。关键不是看总耗时，而是拆解各阶段——DNS、TCP、TLS、TTFB、下载，才能准确定位卡在哪。
快速筛选目标资源
先从一堆资源里精准定位你要分析的文件：
- 查所有 JS：
resources.filter(r => r.initiatorType === 'script') - 找某张首屏图：
resources.find(r => r.name.includes('banner') && r.initiatorType === 'img') - 筛核心 CSS：
resources.filter(r => r.initiatorType === 'link' && r.name.endsWith('.css')) - 按体积倒序看大资源：
resources.sort((a, b) => b.encodedBodySize - a.encodedBodySize)
分阶段识别典型瓶颈
每个 PerformanceResourceTiming 对象提供多个时间点，做差值就能判断问题归属：
- DNS 慢：`domainLookupEnd - domainLookupStart > 100ms`，尤其在首次访问或 DNS 未缓存时明显
- TCP/TLS 卡住：`connectEnd - connectStart > 200ms`，iOS 设备对 OCSP stapling 敏感，HTTPS 配置不当易触发
- 后端响应慢（TTFB 高）：`responseStart - requestStart > 500ms`，含服务端渲染、数据库查询、CDN 回源等耗时
- 下载慢：`responseEnd - responseStart` 明显偏高，结合 `transferSize` 判断是否带宽不足或资源未压缩
- 零值异常：如 `domainLookupStart === 0`，说明该资源走的是内存/HTTP 缓存，没走网络，此时其他字段也无效
跨域资源要配头才看得全
JS、CSS、图片如果来自 CDN 或第三方域名，默认只暴露 `startTime`、`duration` 等基础字段。想看到 DNS、TCP、TTFB 等完整链路，服务端必须返回：
立即学习“前端免费学习笔记（深入）”；
Timing-Allow-Origin: *或者指定域名，例如：Timing-Allow-Origin: https://cdn.example.com
用 PerformanceObserver 实时捕获
页面加载中动态插入的资源（比如懒加载图片、运行时 fetch 的 JS），用轮询可能错过。推荐监听方式：
- 初始化监听器：
new PerformanceObserver(cb).observe({ entryTypes: ['resource'], buffered: true }) -
buffered: true能回溯页面已加载完的资源，适合监控脚本晚于资源加载完成时注入的场景 - 回调中过滤
entry.entryType === 'resource'，再按需提取字段上报或告警
