PerformanceResourceTiming

描述

该接口的属性使用高分辨率时间戳创建了一个资源加载时间线，用于网络事件，例如重定向开始和结束时间、抓取开始、DNS 查找开始和结束时间、响应开始和结束时间等等。此外，该接口还通过其他属性扩展了 PerformanceEntry，这些属性提供了有关所获取资源大小以及发起抓取资源的类型的数据。

典型资源计时指标

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

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

实例属性

继承自 PerformanceEntry

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

PerformanceEntry.duration 只读

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

PerformanceEntry.entryType 只读

返回 "resource"。

PerformanceEntry.name 只读

返回资源的 URL。

PerformanceEntry.startTime 只读

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

时间戳

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

PerformanceResourceTiming.redirectStart 只读

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

PerformanceResourceTiming.redirectEnd 只读

一个 DOMHighResTimeStamp，紧接着收到最后一个重定向响应的最后一个字节之后。

PerformanceResourceTiming.workerStart 只读

返回一个 DOMHighResTimeStamp，紧接着在调度 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 实验性 只读

一个 DOMHighResTimeStamp，表示临时响应时间（例如，100 Continue 或 103 Early Hints）。

PerformanceResourceTiming.responseStart 只读

一个 DOMHighResTimeStamp，紧接着在浏览器从服务器接收到响应的第一个字节之后（这可能是一个临时响应）。

PerformanceResourceTiming.finalResponseHeadersStart 实验性 只读

一个 DOMHighResTimeStamp，表示在任何临时响应时间之后，最终的头部响应时间（例如，200 Success）。

PerformanceResourceTiming.responseEnd 只读

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

附加资源信息

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

PerformanceResourceTiming.contentType 只读 实验性

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

PerformanceResourceTiming.decodedBodySize 只读

一个数字，表示从抓取（HTTP 或缓存）消息体接收到的字节大小（以八位字节为单位），在移除任何应用的 content encoding 之后。

PerformanceResourceTiming.deliveryType 实验性 只读

指示资源是如何交付的 — 例如来自缓存或来自导航预取。

PerformanceResourceTiming.encodedBodySize 只读

一个数字，表示从抓取（HTTP 或缓存）有效载荷体接收到的字节大小（以八位字节为单位），在移除任何应用的 content encoding 之前。

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

规范

浏览器兼容性

另见

• 资源计时（概述）