直接调用performance.getEntriesByType('resource')可获取所有静态资源完整时序数据，需拆解DNS、TCP、TTFB、下载四阶段定位瓶颈；跨域资源须服务端配置Timing-Allow-Origin头才能获取完整字段，PerformanceObserver配合buffered:true可捕获动态加载资源。
直接调用 performance.getEntriesByType('resource') 就能拿到所有已加载静态资源（JS、CSS、图片、字体等）的完整时序数据，不需要改请求逻辑或手动埋点。关键不是看总耗时，而是拆解 DNS、TCP、TTFB、下载四个阶段，定位真实瓶颈。
分阶段识别典型瓶颈
每个 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，说明该阶段被缓存跳过（例如 DNS 复用或强缓存），不是数据丢失
跨域资源必须配头才看得全
JS、CSS、图片若来自 CDN 或第三方域名，默认只暴露 startTime、duration 等基础字段。想看到 DNS、TCP、TTFB 等完整链路，服务端必须返回：
宝塔Linux面板11.3.0
下载
宝塔面板11.3.0是一款针对Linux服务器设计的可视化管理工具，通过重构核心模块实现资源占用显著降低，尤其适合低配置服务器环境。它将复杂的命令行操作转化为直观的图形界面，帮助开发者快速完成网站部署、环境配置及日常运维工作，无需专业技术背景即可高效管理服务器。
-
Timing-Allow-Origin: *（开发调试可用） - 或精确指定域名：
Timing-Allow-Origin: https://cdn.example.com
没配头的跨域资源，多数网络阶段字段会是 0 或 NaN，无法用于归因分析。
用 PerformanceObserver 实时捕获动态资源
页面中懒加载图片、运行时 fetch 的 JS、异步插入的 script，用轮询容易错过。推荐监听方式：
- 初始化监听器：
new PerformanceObserver(cb).observe({ entryTypes: ['resource'], buffered: true }) -
buffered: true能回溯页面已加载完的资源，适合监控脚本晚于资源加载完成时注入的场景 - 回调中按
initiatorType或name过滤，比如只分析 JS：e.initiatorType === 'script'；匹配 CDN 图片：e.name.includes('cdn.example.com')
执行时机和有效性判断很关键
常见错误是调用太早或误读字段：
- 应在
window.addEventListener('load', ...)后调用，或用PerformanceObserver监听，避免返回空数组 -
duration只等于responseEnd - startTime，漏掉重定向、DNS、TCP 等环节，不能用于归因 - 计算各阶段前先确认字段有效：只有
domainLookupStart > 0且domainLookupEnd > 0才能算 DNS 耗时；requestStart === 0时，responseStart - requestStart无效，可退回到responseStart - startTime近似 TTFB
