The PerformanceResourceTiming
interface enables retrieving and analyzing detailed network timing data regarding the loading of an application's resources. An application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an {{domxref("XMLHttpRequest")}}, {{SVGElement("SVG","SVG element")}}, image, script, etc.).
The interface's properties create a resource loading timeline with {{domxref("DOMHighResTimeStamp","high resolution timestamps")}} for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, etc. Additionally, the interface extends {{domxref("PerformanceEntry","performance entries")}} with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch.
This interface extends the following {{domxref("PerformanceEntry")}} properties by qualifying and constraining these properties for {{domxref("PerformanceEntry","performance entries")}} with an {{domxref("PerformanceEntry.entryType","entry type")}} of "resource
":
- {{domxref("PerformanceEntry.entryType")}}
- Set to "
resource
". - {{domxref("PerformanceEntry.name")}}
- Set to the resource's URL.
- {{domxref("PerformanceEntry.startTime")}}
- Set to the {{domxref("DOMHighResTimeStamp","timestamp")}} immediately before the browser to {{domxref("PerformanceEntry.fetchStart","fetch the resource")}}.
- {{domxref("PerformanceEntry.duration")}}
- Set to the difference between the resource's {{domxref("PerformanceResourceTiming.responseEnd","responseEnd")}} {{domxref("DOMHighResTimeStamp","timestamp")}} and its {{domxref("PerformanceEntry.startTime","startTime")}} {{domxref("DOMHighResTimeStamp","timestamp")}}.
Properties
- {{domxref('PerformanPerformanceResourceTimingceEntry.initiatorType')}}{{readonlyInline}}
- A {{domxref("DOMString","string")}} representing the type of resource that initiated the performance entry, as specified in {{domxref('PerformanceResourceTiming.initiatorType')}}.
- {{domxref('PerformanceResourceTiming.nextHopProtocol')}}{{readonlyInline}}
- A {{domxref("DOMString","string")}} representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301).
- {{domxref('PerformanceResourceTiming.workerStart')}}{{readonlyInline}}
- If the current context is a {{domxref("Worker","worker")}}, returns the {{domxref("DOMHighResTimeStamp")}} immediately before the worker is started that fetches the resource; otherwise zero is returned.
- {{domxref('PerformanceResourceTiming.redirectStart')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} that represents the start time of the fetch which initiates the redirect.
- {{domxref('PerformanceResourceTiming.redirectEnd')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately after receiving the last byte of the response of the last redirect.
- {{domxref('PerformanceResourceTiming.fetchStart')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately before the browser starts to fetch the resource.
- {{domxref('PerformanceResourceTiming.domainLookupStart')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately before the browser starts the domain name lookup for the resource.
- {{domxref('PerformanceResourceTiming.domainLookupEnd')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} representing the time immediately after the browser finishes the domain name lookup for the resource.
- {{domxref('PerformanceResourceTiming.connectStart')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately before the browser starts to establish the connection to the server to retrieve the resource.
- {{domxref('PerformanceResourceTiming.connectEnd')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately after the browser finishes establishing the connection to the server to retrieve the resource.
- {{domxref('PerformanceResourceTiming.secureConnectionStart')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately before the browser starts the handshake process to secure the current connection.
- {{domxref('PerformanceResourceTiming.requestStart')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately before the browser starts requesting the resource from the server.
- {{domxref('PerformanceResourceTiming.responseStart')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately after the browser receives the first byte of the response from the server.
- {{domxref('PerformanceResourceTiming.responseEnd')}}{{readonlyInline}}
- A {{domxref("DOMHighResTimeStamp")}} immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
- {{domxref('PerformanceResourceTiming.transferSize')}}{{readonlyInline}}
- A
number
representing the size (in octets) of the fetched resource. The size includes the response header fields plus the response payload body. - {{domxref('PerformanceResourceTiming.encodedBodySize')}}{{readonlyInline}}
- A
number
representing the size (in octets) received from the fetch (HTTP or cahce), of the payload body, before removing any applied content-codings. - {{domxref('PerformanceResourceTiming.decodedBodySize')}}{{readonlyInline}}
- A
number
that is the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content-codings.
Methods
This interface has no methods. It extends the {{domxref("PerformanceEntry.toJson","PerformanceEntry.toJSON()")}} method with additional constraints/qualifications for "resource
" {{domxref("PerformanceEntry.entryType","performance entry types")}}.
Example
See the example in Using the Resource Timing API.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Resource Timing', '#performanceresourcetiming', 'PerformanceResourceTiming')}} | {{Spec2('Resource Timing')}} | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support. | 43 | 40 | 10 | 32 | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support. | 4.4 | 42 | {{CompatUnknown}} | 10.0 | 32 | {{CompatNo}} |