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 {{domxref("PerformanceEntry","performance entry")}} properties extended by this interface 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.
The PerformanceResourceTiming
interface has no properties, no methods nor any constructors. However, it extends the {{domxref("PerformanceEntry")}} interface with several properties (listed in the {{domxref("PerformanceEntry")}} reference).
PerformanceResourceTiming
also extends the following {{domxref("PerformanceEntry","PerformanceEntry")}} properties: {{domxref("PerformanceEntry.name","name")}}, {{domxref("PerformanceEntry.entryType","entryType")}}, {{domxref("PerformanceEntry.startTime","startTime")}} and {{domxref("PerformanceEntry.duration","duration")}} with additional constraints/qualifications for "resource
" {{domxref("PerformanceEntry.entryType","performance entry types")}}.
Properties
This interface has no properties but it extends the following {{domxref("PerformanceEntry")}} properties by qualifying/constrainting the properties as follows:
- {{domxref("PerformanceEntry.entryType","entryType")}}
- Set to "
resource
". - {{domxref("PerformanceEntry.name","name")}}
- Set to the resource's URL.
- {{domxref("PerformanceEntry.startTime","startTime")}}
- Set to the {{domxref("DOMHighResTimeStamp","timestamp")}} immediately before the browser to {{domxref("PerformanceEntry.fetchStart","fetch the resource")}}.
- {{domxref("PerformanceEntry.duration","duration")}}
- Set to the difference between the resource's {{domxref("PerformanceEntry.responseEnd","responseEnd")}} {{domxref("DOMHighResTimeStamp","timestamp")}} and its {{domxref("PerformanceEntry.startTime","startTime")}} {{domxref("DOMHighResTimeStamp","timestamp")}}.
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}} |