PerformanceResourceTiming

该接口的属性创建了一个资源加载时间线，其中包含网络事件的高分辨率时间戳，例如重定向开始和结束时间、获取开始、DNS 查找开始和结束时间、响应开始和结束时间等。此外，该接口扩展了 PerformanceEntry，并添加了其他属性，这些属性提供了有关获取资源的大小以及启动获取的资源类型的更多数据。

此接口的属性允许您计算某些资源计时指标。常见的用例包括

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

此接口通过以下方式对资源性能条目类型扩展了以下 PerformanceEntry 属性，并对其进行了限定和约束

PerformanceEntry.duration 只读

返回一个 时间戳，该时间戳是 responseEnd 和 startTime 属性之间的差值。

PerformanceEntry.entryType 只读

返回 "resource"。

PerformanceEntry.name 只读

返回资源的 URL。

PerformanceEntry.startTime 只读

返回资源获取开始时的 时间戳。此值等效于 PerformanceResourceTiming.fetchStart。

该接口支持以下时间戳属性，您可以在图表中看到它们，并且按获取资源时记录它们的顺序列出。导航中左侧显示了一个按字母顺序排列的列表。

PerformanceResourceTiming.redirectStart 只读

一个 DOMHighResTimeStamp，表示启动重定向的获取的开始时间。

PerformanceResourceTiming.redirectEnd 只读

一个 DOMHighResTimeStamp，表示接收完最后一个重定向的响应的最后一个字节后立即。

PerformanceResourceTiming.workerStart 只读

返回一个 DOMHighResTimeStamp，表示如果 Service Worker 线程已在运行，则在分发 FetchEvent 之前立即；如果 Service Worker 线程尚未运行，则在启动 Service Worker 线程之前立即。如果资源未被 Service Worker 拦截，则该属性将始终返回 0。

PerformanceResourceTiming.fetchStart 只读

一个 DOMHighResTimeStamp，表示浏览器开始获取资源之前立即。

PerformanceResourceTiming.domainLookupStart 只读

一个 DOMHighResTimeStamp，表示浏览器开始对资源进行域名查找之前立即。

PerformanceResourceTiming.domainLookupEnd 只读

表示浏览器完成资源域名查找后立即的时间的 DOMHighResTimeStamp。

PerformanceResourceTiming.connectStart 只读

表示浏览器开始建立与服务器的连接以检索资源之前的 DOMHighResTimeStamp。

PerformanceResourceTiming.secureConnectionStart 只读

表示浏览器开始握手过程以保护当前连接之前的 DOMHighResTimeStamp。

PerformanceResourceTiming.connectEnd 只读

表示浏览器完成与服务器的连接以检索资源后的 DOMHighResTimeStamp。

PerformanceResourceTiming.requestStart 只读

表示浏览器开始从服务器请求资源之前的 DOMHighResTimeStamp。

PerformanceResourceTiming.firstInterimResponseStart 实验性 只读

表示中间响应时间（例如，100 Continue 或 103 Early Hints）的 DOMHighResTimeStamp。

PerformanceResourceTiming.responseStart 只读

表示浏览器从服务器收到响应的第一个字节后的 DOMHighResTimeStamp。

PerformanceResourceTiming.responseEnd 只读

表示浏览器收到资源的最后一个字节后或传输连接关闭之前的 DOMHighResTimeStamp，以先发生者为准。

此外，此接口公开了包含有关资源的更多信息的以下属性。

PerformanceResourceTiming.contentType 只读 实验性

表示已获取资源的 MIME 类型的最小化和标准化版本的字符串。

PerformanceResourceTiming.decodedBodySize 只读

表示从消息主体获取（HTTP 或缓存）后（在删除任何应用的内容编码后）收到的消息主体的大小（以八位字节为单位）的数字。

PerformanceResourceTiming.deliveryType 实验性 只读

表示资源的传送方式，例如从缓存或导航预取。

PerformanceResourceTiming.encodedBodySize 只读

表示从获取（HTTP 或缓存）中收到的有效负载主体的尺寸（以八位字节为单位）的数字，在删除任何应用的内容编码之前。

PerformanceResourceTiming.initiatorType 只读

表示启动性能条目的 Web 平台功能的字符串。

PerformanceResourceTiming.nextHopProtocol 只读

表示用于获取资源的网络协议的字符串，如 ALPN 协议 ID（RFC7301） 所标识。

PerformanceResourceTiming.renderBlockingStatus 只读

表示渲染阻止状态的字符串。为 “blocking” 或 “non-blocking”。

PerformanceResourceTiming.responseStatus 只读

表示在获取资源时返回的 HTTP 响应状态代码的数字。

PerformanceResourceTiming.transferSize 只读

表示已获取资源的大小（以八位字节为单位）的数字。此大小包括响应标头字段和响应有效负载主体。

PerformanceResourceTiming.serverTiming 只读

包含服务器计时指标的 PerformanceServerTiming 条目的数组。

PerformanceResourceTiming.toJSON()

返回 PerformanceResourceTiming 对象的 JSON 表示形式。

使用 PerformanceObserver 的示例，该示例在浏览器性能时间线中记录新的 resource 性能条目时通知。使用 buffered 选项访问观察者创建之前的条目。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

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

使用 Performance.getEntriesByType() 的示例，该示例仅显示在您调用此方法时存在于浏览器性能时间线中的 resource 性能条目。

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});

许多资源计时属性被限制为在资源是跨源请求时返回 0 或空字符串。若要公开跨源计时信息，需要设置 Timing-Allow-Origin HTTP 响应标头。

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

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

• 资源计时（概述）