直接调用performance.getentriesbytype('resource')可获取页面已加载完成的所有资源performanceresourcetiming数据，但需在load事件后调用，且应拆解各阶段时间差（如dns、tcp、ttfb）而非依赖duration；跨域资源需timing-allow-origin头才提供完整时序，动态创建未加载的资源不包含在内。
直接调用 performance.getEntriesByType('resource') 获取所有资源数据
页面加载完成后，浏览器已自动记录每个网络请求的完整生命周期，无需手动打点。只要执行 performance.getEntriesByType('resource')，就能拿到当前页所有图片、脚本、样式表等资源的 PerformanceResourceTiming 对象数组。
注意：该 API 只返回「已完成加载」的资源，动态插入后尚未触发加载（如刚创建但未 append 的 <img>）不会出现在结果里；另外，跨域资源若未声明 Timing-Allow-Origin 响应头，多数时间字段会被置为 0（仅保留 name、startTime、duration 等基础字段）。
常见误操作是过早调用——比如在 DOMContentLoaded 触发时立刻查，但此时部分图片可能还在加载中。稳妥做法是监听 load 事件，或使用 setTimeout 延迟几百毫秒再取。
计算各阶段耗时必须用差值，不能依赖 duration
duration 字段只等于 responseEnd - startTime，它漏掉了重定向、DNS、TCP 等前置环节，对性能归因几乎无用。真正要定位瓶颈，得拆解各阶段：
-
entry.redirectEnd - entry.redirectStart：重定向总耗时（含多次跳转） -
entry.domainLookupEnd - entry.domainLookupStart：DNS 查询时间 -
entry.connectEnd - entry.connectStart：TCP 连接（含 TLS 握手，若secureConnectionStart > 0） -
entry.responseStart - entry.requestStart：TTFB（首字节时间） -
entry.responseEnd - entry.responseStart：内容下载耗时
特别注意：如果某个阶段值为 0（如 domainLookupStart === 0），通常说明该阶段被缓存跳过（例如 DNS 结果复用、资源走强缓存），不是数据丢失。
筛选特定资源要用 initiatorType 或 name 匹配
一个页面常有几十个资源，全量遍历效率低且难聚焦。优先按发起类型过滤：
比如只看 JS 脚本：performance.getEntriesByType('resource').filter(e => e.initiatorType === 'script')；只看某 CDN 图片：.filter(e => e.name.includes('cdn.example.com'))。
initiatorType 常见值包括：script、link、img、xmlhttprequest、fetch、iframe。但注意：通过 new Image().src = url 动态加载的图片，initiatorType 是 undefined，只能靠 name 字符串匹配。
真实环境需处理 PerformanceObserver + 缓冲区限制
页面加载过程中资源陆续完成，getEntriesByType 只能捕获「调用时刻已结束」的条目。想实时监控，得用 PerformanceObserver：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
if (entry.entryType === 'resource') {
console.log(`${entry.name} 加载完成，耗时 ${entry.duration.toFixed(2)}ms`);
}
});
});
observer.observe({entryTypes: ['resource']});
但要注意：浏览器对 PerformanceEntry 缓冲区有上限（通常 150 条左右），旧条目会被自动丢弃。若需长期采集，应在观察器内及时提取关键字段（如 name、duration、transferSize）并上报，别依赖后续再查全量数据。
最后提醒：本地开发时，HTTP 缓存和 Service Worker 会极大干扰测量结果。分析前务必清空缓存、禁用 SW，或在隐身窗口中测试——否则看到的 DNS 时间为 0、TTFB 为 1ms，全是假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
