可直接用performance.getEntriesByType('resource')获取所有静态资源的完整网络时序数据，无需额外埋点或改请求逻辑；浏览器自动记录高精度时间戳，返回PerformanceResourceTiming对象数组，含name、duration、transferSize等关键字段，跨域需Timing-Allow-Origin支持。
可以直接用 performance.getEntriesByType('resource') 获取所有静态资源的完整网络时序数据，不需要额外埋点或改请求逻辑。
获取资源加载全量时间线
浏览器会在资源加载完成后自动记录每个请求的高精度时间戳。执行以下代码就能拿到当前页面所有图片、CSS、JS、字体等资源的详细耗时：
- 在控制台运行
performance.getEntriesByType('resource')，返回数组每一项都是一个PerformanceResourceTiming对象 - 关键字段包括：
name（请求 URL）、startTime、responseStart、responseEnd、duration、transferSize、encodedBodySize - 注意：跨域资源默认只暴露基础字段（如
startTime、duration），要获取完整数据需服务端配置Timing-Allow-Origin响应头
筛选特定类型或路径的资源
实际分析中往往只关注某类资源，比如首屏图片或核心 CSS：
- 过滤 JS 文件：
performance.getEntriesByType('resource').filter(r => r.initiatorType === 'script') - 查找某张图片：
performance.getEntriesByType('resource').find(r => r.name.includes('hero-banner.jpg')) - 按大小排序看大资源：
resources.sort((a, b) => b.encodedBodySize - a.encodedBodySize)
识别常见瓶颈阶段
通过对比关键时间点，能快速定位慢在哪一环：
-
DNS 慢：看
domainLookupEnd - domainLookupStart是否 > 50ms -
TLS 握手卡住：检查
connectEnd - secureConnectionStart，尤其 iOS 设备对 OCSP stapling 敏感 -
后端响应慢（TTFB 高）：计算
responseStart - requestStart，SSR 页面里这个值含服务端渲染时间 -
下载慢：观察
responseEnd - responseStart和transferSize是否匹配带宽预期
配合 PerformanceObserver 实时监听
如果想在资源加载完成瞬间就捕获数据（比如用于上报），用观察者比轮询更可靠：
- 创建监听器：
new PerformanceObserver(cb).observe({type: 'resource', buffered: true}) -
buffered: true能回溯已发生的资源事件，适合页面加载后才初始化监控的情况 - 回调中可对新资源做分类、打标、聚合或上报，避免阻塞主流程
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
