Resource Timing API - 检索和分析有关应用程序资源加载的详细网络时序数据
Resource Timing
接口可以检索和分析有关应用程序资源加载的详细网络时序数据。例如,应用程序可以使用计时指标来确定加载特定资源(如 XMLHttpRequest
、<SVG>
、图像或脚本)所需的时间长度。
接口的属性创建一个资源加载时间线,其中包含用于网络事件的高精度时间戳,例如重定向开始和结束时间、DNS 查找开始和结束时间、请求开始、响应开始和结束时间等。该接口还包括其他属性,这些属性提供有关获取的资源大小的数据以及启动获取的资源的类型。
本文档概述了 Resource Timing
接口。有关包括实例在内的接口的更多详细信息,请参阅每个接口的参考页面、使用资源计时 API 以及相关链接部分中的参考。有关资源时序处理模型的图形表示,请参见资源时序阶段图。
PerformanceResourceTiming
接口为 PerformanceEntry
扩展了 entryType
为 resource
的性能条目。
高精度时间戳
一些 Resource Timing
属性返回高精度时间戳。这些时间戳的类型为 DOMHighResTimeStamp
,顾名思义,它们代表一个高精度的时间点。这种类型是一个 double
,它的值是一个离散时间点或两个离散时间点之间的时间差。
DOMHighResTimeStamp
的单位是毫秒,应该精确到 5 µs(微秒)。但是,如果浏览器无法提供精确到 5 µs 的时间值(例如,由于硬件或软件限制),浏览器可以将该值表示为精确到毫秒的毫秒时间。
资源加载时间戳
应用程序可以获得用于加载资源的各个阶段的时间戳。处理模型中的第一个属性是 startTime
,它在资源加载过程开始之前立即返回时间戳。fetchStart
的时间戳是跟随和重定向处理(如果有的话),并在DNS查询之前。下一个阶段是 connectStart
和 connectEnd
,它们分别是连接到服务器之前和之后的时间戳。最后三个时间戳依次为: requestStart
- 浏览器开始向服务器请求资源之前的时间戳;responseStart
- 浏览器收到服务器响应的第一个字节后的时间戳;和 responseEnd
- 浏览器收到资源最后一个字节后的时间戳。如果资源是通过安全连接加载的,则在连接开始和结束事件之间将有一个 secureConnectionStart
时间戳。
注意: 当 CORS 生效时,其中许多值将返回为零,除非服务器的访问策略允许共享这些值。这要求提供资源的服务器发送
Timing-Allow-Origin
HTTP 响应标头,其值指定允许获取受限时间戳值的一个或多个来源。从网页本身以外的域加载资源时默认返回为 0 的属性有:
redirectStart
、redirectEnd
、domainLookupStart
、domainLookupEnd
、connectStart
、connectEnd
、secureConnectionStart
、requestStart
和responseStart
。
PerformanceResourceTiming
接口还包括几个网络计时属性。 redirectStart
和 redirectEnd
属性分别返回重定向开始和结束时间的时间戳
。 同样,domainLookupStart
和 domainLookupEnd
属性分别返回 DNS 查找开始和结束时间的时间戳。
资源大小
PerformanceResourceTiming
接口具有三个属性,可用于获取有关资源的大小数据。
transferSize
属性返回获取的资源的大小(以八位字节为单位),包括响应标头字段和响应负载正文。
encodedBodySize
属性返回在删除任何应用的内容编码之前,从有效负载主体的提取(HTTP 或缓存)接收到的大小(以八位字节为单位)。
decodedBodySize
返回在删除任何应用的内容编码之后,从消主体的提取(HTTP 或缓存)接收到的大小(以八位字节为单位)。
其他属性
nextHopProtocol
属性返回用于获取资源的网络协议。
initiatorType
属性返回启动性能条目的资源类型,例如 CSS 资源是 “css
”、XMLHttpRequest 是 “xmlhttprequest
”,图像是 “img
”(例如 JPEG)。
如果当前上下文是 worker
,则 workerStart
属性可用于获取工作线程开始的 DOMHighResTimeStamp
。
方法
Resource Timing API 包括两个扩展 Performance
接口的方法。clearResourceTimings()
方法从浏览器的资源性能条目缓冲区中删除所有 “resource
” 类型的性能条目。setResourceTimingBufferSize()
方法将资源性能条目缓冲区大小设置为指定数量的资源性能条目
。
PerformanceResourceTiming
接口的 toJSON()
方法返回 “resource
” 类型的性能条目
。
规范
规范 |
---|
Resource Timing |
实现状态
如 PerformanceResourceTiming
接口的浏览器兼容性表所示,桌面浏览器实现了这些接口中的大多数。但是,请注意,某些属性几乎没有实现,因此请参阅每个属性的 “浏览器兼容性” 部分以获取更具体的数据。
要测试浏览器对这些接口的支持,请运行 perf-api-support
应用程序。
相关链接
- Resource Timing Standard; W3C Editor's Draft
- CanIUse 数据
- 资源计时实用技巧;Steve Souders;2014 年 8 月 21 日
- 使用 Resource Timing API 测量网络性能; Ilya Grigorik; 2013 年 12 月 11 日
- Web 性能计时 API 入门; Xiaoqian Wu; W3C Editor's Draft