资源时序

图 1. 资源加载时间戳（来源）。

应用程序可以获取用于加载资源的各个阶段的时间戳。此 API 提供的时间戳为

1. startTime：资源加载过程开始之前的立即时间戳。
2. redirectStart：启动重定向的获取的时间戳。
3. redirectEnd：收到最后一个重定向的响应的最后一个字节之后的立即时间戳。
4. workerStart：启动 Service Worker 线程之前的立即时间戳。
5. fetchStart：浏览器开始获取资源之前的立即时间戳。
6. domainLookupStart：浏览器开始对资源执行域名查找之前的立即时间戳。
7. domainLookupEnd：浏览器完成对资源的域名查找之后的立即时间戳。
8. connectStart：用户代理开始建立与服务器的连接以检索资源之前的立即时间戳。
9. secureConnectionStart：如果资源通过安全连接加载，则浏览器开始握手过程以保护当前连接之前的立即时间戳。
10. connectEnd：浏览器完成建立与服务器的连接以检索资源之后的立即时间戳。
11. requestStart：浏览器开始从服务器、缓存或本地资源请求资源之前的立即时间戳。
12. responseStart：浏览器从服务器、缓存或本地资源收到第一个响应字节之后的立即时间戳。
13. responseEnd：浏览器收到资源的最后一个字节之后的立即时间戳，或传输连接关闭之前的立即时间戳，以先发生者为准。

PerformanceResourceTiming接口具有三个属性，可用于获取有关资源的大小数据。transferSize属性返回获取的资源的大小（以字节为单位），包括响应标头字段加上响应有效负载主体。

encodedBodySize属性返回从获取（HTTP 或缓存）接收到的有效负载主体的大小（以八位字节为单位），在移除任何应用的内容编码之前。decodedBodySize返回从获取（HTTP 或缓存）接收到的消息主体的大小（以八位字节为单位），在移除任何应用的内容编码之后。

PerformanceResourceTiming接口提供其他资源信息。请参阅参考文档以获取完整属性列表。

PerformanceResourceTiming条目提供的信息通常用于以下计算

• 测量 TCP 握手时间 (connectEnd - connectStart)
• 测量 DNS 查询时间 (domainLookupEnd - domainLookupStart)
• 测量重定向时间 (redirectEnd - redirectStart)
• 测量请求时间 (responseStart - requestStart)
• 测量 TLS 协商时间 (requestStart - secureConnectionStart)
• 测量获取时间（无重定向）(responseEnd - fetchStart)
• 测量 Service Worker 处理时间 (fetchStart - workerStart)
• 检查内容是否已压缩 (decodedBodySize 不应等于 encodedBodySize)
• 检查是否命中本地缓存 (transferSize 应为 0)
• 检查是否使用了现代且快速的协议 (nextHopProtocol 应为 HTTP/2 或 HTTP/3)
• 检查正确的资源是否为渲染阻塞 (renderBlockingStatus)

PerformanceResourceTiming参考页面包含用于测量所有这些指标的示例代码。通常，测量这些指标的代码如下所示

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

当CORS生效时，除非服务器的访问策略允许共享这些值，否则许多时序属性的值将返回为零。这要求提供资源的服务器发送Timing-Allow-Origin HTTP 响应标头，其值为指定允许获取受限时间戳值的来源或来源。

从网页本身以外的来源加载资源时，默认情况下返回为 0 的属性：redirectStart、redirectEnd、domainLookupStart、domainLookupEnd、connectStart、connectEnd、secureConnectionStart、requestStart 和 responseStart。

例如，要允许https://mdn.org.cn查看资源时序信息，跨源资源应发送

Timing-Allow-Origin: https://mdn.org.cn

如果您的网站或应用程序获取的资源超过 250 个，并且您想要记录超过 250 个PerformanceResourceTiming条目，则需要增加资源时序缓冲区的大小。

要设置浏览器性能资源数据缓冲区的大小，请使用Performance.setResourceTimingBufferSize()方法，要清除浏览器性能资源数据缓冲区，请使用Performance.clearResourceTimings()方法。

要获得浏览器资源时序缓冲区已满时的通知，请侦听resourcetimingbufferfull事件。

以下调用允许浏览器性能时间线中存在 500 个"resource"性能条目。

performance.setResourceTimingBufferSize(500);

有关更多信息，另请参阅管理缓冲区大小。

• PerformanceResourceTiming
• Timing-Allow-Origin
• Performance.setResourceTimingBufferSize()
• Performance.clearResourceTimings()