PerformanceResourceTiming

描述

此接口的属性使用高分辨率时间戳创建网络事件的资源加载时间线，例如重定向开始和结束时间、获取（fetch）开始、DNS 查询开始和结束时间、响应开始和结束时间等。此外，接口使用其他属性扩展了 PerformanceEntry，这些属性提供有关获取资源的大小以及初始化时获取的资源类型的数据。

经典的资源加载计时指标

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

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

属性

继承自 PerformanceEntry

此接口通过限定和约束以下 PerformanceEntry 属性来扩展资源性能条目类型：

PerformanceEntry.duration 只读

返回表示 responseEnd 和 startTime 属性之差的 timestamp。

PerformanceEntry.entryType 只读

返回 "resource"。

PerformanceEntry.name 只读

返回资源的 URL。

PerformanceEntry.startTime 只读

返回资源获取开始时的 timestamp。该值等同于 PerformanceResourceTiming.fetchStart。

时间戳

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

PerformanceResourceTiming.redirectStart 只读

表示发起重定向的获取的开始时间的 DOMHighResTimeStamp。

PerformanceResourceTiming.redirectEnd 只读

表示在接收到最后一个重定向响应的最后一个字节后的 DOMHighResTimeStamp。

PerformanceResourceTiming.workerStart 只读

如果 Service Worker 线程已在运行，则返回在派发 FetchEvent 之前的 DOMHighResTimeStamp；如果 Service Worker 线程尚未在运行，则返回在启动 Service Worker 线程之前的 DOMHighResTimeStamp。如果资源未被 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.finalResponseHeadersStart 实验性 只读

表示最终标头响应时间（例如，200 Success）的 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://big.rakal.top 查看资源计时信息，跨源资源应发送：

Timing-Allow-Origin: https://big.rakal.top

规范

浏览器兼容性

参见

• 资源计时（概述）