术语表
- Resource Timing API
- W3C标准化的浏览器性能API，用于获取页面中所有网络资源的详细加载时序信息。通过performance.getEntriesByType('resource')方法可以获取资源时序条目列表，每个条目包含资源名称、类型、各个阶段的时间戳等丰富数据。该API是前端性能监控的核心基础设施之一。
- 性能缓冲区
- 浏览器为Resource Timing数据分配的固定大小内存空间，用于存储资源时序条目。默认大小为150条，可通过setResourceTimingBufferSize()方法调整。当缓冲区满时，最早的数据条目不会被覆盖（与导航时序缓冲区不同），但新条目将无法添加，此时需要监听bufferfull事件或增大缓冲区容量。
- bufferfull事件
- 当Resource Timing缓冲区达到容量上限时由performance对象触发的事件。开发者可以通过addEventListener('bufferfull', handler)来监听此事件，并在回调中执行清空缓冲区、调整缓冲区大小或切换到PerformanceObserver等应对策略。
- PerformanceObserver
- 浏览器提供的性能观测器接口，可以异步监听特定类型的性能条目。使用PerformanceObserver监听'resource'类型可以持续接收新产生的资源时序数据，无需依赖缓冲区存储，是替代轮询getEntriesByType的推荐方式。
- 资源类型分类
- Resource Timing将网络资源分为多种类型，包括script（脚本）、link（样式表和预加载）、img（图片）、css（内联样式）、fetch（Fetch API请求）、xmlhttprequest（XHR请求）、font（字体文件）、media（音视频）、other（其他类型）等。每种类型在性能分析中都有不同的关注点。
- DOM High Resolution Time
- 高精度时间戳标准，使用performance.now()获取，精度达到微秒级别。Resource Timing中的所有时间戳均基于此标准，从页面导航开始时刻（timeOrigin）起算。注意DOMHighResTimeStamp与Date.now()的时间基准不同，不可直接比较。
- 资源加载瀑布图
- 以水平条形图形式展示各资源加载各阶段耗时的可视化图表。横轴为时间，每个资源一行，不同颜色的段表示DNS查询、TCP连接、TLS握手、请求发送、等待响应、内容下载等阶段。本工具的资源列表视图即采用了类似的展示方式。
- 跨域资源计时
- 当资源来自跨域服务器时，如果未设置Timing-Allow-Origin响应头，浏览器出于安全考虑会隐藏详细的时序信息。此时资源条目中的大部分时间戳字段将被设置为0。需要在服务端配置Timing-Allow-Origin头才能获取完整的跨域资源时序数据。
- 传输大小 vs 编码大小
- Resource Timing提供encodedBodySize（编码后大小，即经过gzip/brotli压缩后的实际传输字节数）和decodedBodySize（解码后大小，即原始内容字节数）两个字段。两者之差反映了压缩算法的效率，对于带宽优化分析具有重要参考价值。
- 资源时序条目
- performance.getEntriesByType('resource')返回的PerformanceResourceTiming对象列表。每个对象包含startTime、redirectStart/End、domainLookupStart/End、connectStart/End、requestStart、responseStart、responseEnd等完整的时间戳字段，以及name、initiatorType、transferSize等元数据。
🔧 相关工具
UD5工具箱