调用 performance.getEntriesByType('resource') 可获取已加载资源记录，但需满足资源完成加载、未命中强缓存、跨域资源返回 Timing-Allow-Origin: *；可按 MIME 类型、URL 后缀或 initiatorType 筛选 JS/CSS/图片资源，并提取 DNS、TCP、SSL、TTFB、下载及总耗时等字段，同时需过滤 domainLookupStart 为 0、跨域无 timing 数据、强缓存 duration 为 0 等无效情况，推荐 DOMContentLoaded 后采集并用 sendBeacon 上报超时或关键资源数据。
直接调用 performance.getEntriesByType('resource') 即可获取所有已完成加载的资源记录，但要注意数据是否有效取决于三个前提：资源已加载完成、未命中强缓存、跨域资源服务端返回了 Timing-Allow-Origin: * 响应头。
筛选目标 JS/CSS/图片资源
返回的是一个数组，每项代表一个资源（如 script、link、img）。常用筛选方式：
- 按 MIME 类型：
entry.mimeType === 'application/javascript'或'text/css' - 按 URL 后缀：
entry.name.endsWith('.js')或.css、.png等 - 按 initiatorType：
entry.initiatorType === 'script'表示由脚本发起，'img'表示图片标签
提取关键耗时字段
每个 resource 条目提供高精度微秒级时间戳，常用差值计算如下：
-
DNS 查询时间：
entry.domainLookupEnd - entry.domainLookupStart（为 0 表示走本地缓存或 HTTP/2 复用） -
TCP 连接时间：
entry.connectEnd - entry.connectStart -
SSL/TLS 握手时间（仅 HTTPS）：
entry.secureConnectionStart > 0 ? entry.connectEnd - entry.secureConnectionStart : 0 -
TTFB（首字节时间）：
entry.responseStart - entry.requestStart -
内容下载时间：
entry.responseEnd - entry.responseStart -
总加载耗时：
entry.duration（等价于responseEnd - startTime）
处理常见无效情况
不是所有资源都能拿到完整时间数据，需主动过滤或降级：
- 若
entry.domainLookupStart === 0，说明 DNS 被缓存或复用，跳过 DNS 计算 - 跨域资源缺失 timing 数据？确认服务端是否设置了
Timing-Allow-Origin: * - 强缓存资源（status 304 或 from memory cache）的
duration可能为 0，此时不应计入网络瓶颈分析 - 动态插入的资源（如
document.createElement('script')）可能在load事件后才出现，建议尽早采集（例如在DOMContentLoaded后立即调用）
结合上报做实际监控
避免阻塞主线程，推荐用 navigator.sendBeacon 上报聚合数据：
- 只上报超时资源（如 TTFB > 800ms 或 duration > 5s）
- 带上资源类型、URL 主机名、地理位置（前端可粗略判断）、设备类型等上下文
- 对首屏关键资源（如
main.js、核心 CSS、LCP 图片）单独标记并优先分析
