Resource Timing 缓冲区管理 - 处理大量资源计时

Resource Timing API 是 Web Performance API 的一部分，它提供了网页加载的每个资源（如图片、CSS、JS、XHR请求等）的详细网络计时信息。通过 performance.getEntriesByType('resource') 可以获取所有这些计时数据，包括DNS解析时间、TCP连接时间、请求响应时间等，帮助开发者分析和优化页面性能。

浏览器为 Resource Timing 条目维护一个有限大小的缓冲区（默认通常为 250条）。当页面加载大量资源（如大型SPA应用、包含许多图片的页面）时，超过缓冲区容量的计时条目会被丢弃，导致无法获取完整的性能数据。通过 performance.setResourceTimingBufferSize(n) 可以调整缓冲区大小，通过监听 resourcetimingbufferfull 事件可以在缓冲区满时采取措施（如增大缓冲区或发送数据到服务器）。

可以通过 transferSize 属性判断：如果 transferSize === 0 且资源成功加载（status为200或304），说明资源来自缓存（本地缓存或Service Worker缓存）。如果 transferSize > 0，则是从网络传输的实际大小。注意：跨域资源如果没有 Timing-Allow-Origin 响应头，transferSize 也会是0。

处理策略有3种：
1️⃣ 增大缓冲区：调用 performance.setResourceTimingBufferSize(newSize) 设置更大的值。
2️⃣ 清空缓冲区：调用 performance.clearResourceTimings() 清空后再收集新数据（注意旧数据会丢失）。
3️⃣ 主动收集：在事件触发前定期调用 performance.getEntriesByType('resource') 获取数据并存储到自己的数组中，然后清空缓冲区。
推荐做法：在事件中先增大缓冲区，同时将当前数据发送到分析服务器。

常见原因：
• 跨域资源：如果没有 Timing-Allow-Origin 响应头，详细计时（DNS、TCP、请求响应时间等）会被归零，只有 startTime 和 duration 可用。
• 缓存命中：从缓存加载的资源网络阶段时间为0。
• HTTP/3或QUIC：某些连接阶段不适用（如 secureConnectionStart 在非HTTPS下为0）。
• 同源重定向：重定向相关时间可能为0。

PerformanceObserver 是更高效的方式，可以实时接收新的资源计时条目而不需要轮询：
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    // 处理新的resource timing条目
  });
});
observer.observe({ type: 'resource', buffered: true });
其中 buffered: true 参数可以获取调用前已存在的条目。在现代浏览器中推荐使用此方式。

Navigation Timing（通过 performance.getEntriesByType('navigation') 或 performance.timing）只记录主页面的加载计时，包括重定向、DNS、TCP、DOM解析、DOMContentLoaded、Load事件等。
Resource Timing 记录页面中每一个子资源（图片、脚本、样式、XHR等）的加载计时。两者结合可以全面分析页面性能。