PerformanceResourceTiming: initiatorType property
The initiatorType
read-only property is a string representing web platform feature that initiated the resource load.
Note: This property does not represent the type of content fetched. A .css
file can be fetched using a <link>
element leading to an initiatorType
of link
. When loading images using background: url()
in a CSS file, the initiatorType
will be css
and not img
.
Value
The initiatorType
property can have the following values, or other
if none of the conditions match.
audio
-
If the request was initiated by an
<audio>
element'ssrc
attribute. beacon
-
If the request was initiated by a
navigator.sendBeacon()
method. body
-
If the request was initiated by a
<body>
element'sbackground
attribute. css
-
If the request was initiated by a CSS
url()
function. early-hint
-
If the request was initiated by an
103
Early Hint
response. embed
-
If the request was initiated by an
<embed>
element'ssrc
attribute. fetch
-
If the request was initiated by a
fetch()
method. frame
-
If the request was initiated by loading a
<frame>
element. iframe
-
If the request was initiated by an
<iframe>
element'ssrc
attribute. icon
Non-standard-
If the request was initiated by a favicon. Non-standard and only reported by Safari.
image
-
If the request was initiated by an
<image>
element. img
-
If the request was initiated by an
<img>
element'ssrc
orsrcset
attribute. input
-
If the request was initiated by an
<input>
element of typeimage
. link
-
If the request was initiated by a
<link>
element. -
If the request was initiated by a navigation request.
object
-
If the request was initiated by an
<object>
element. ping
-
If the request was initiated by an
<a>
element'sping
. script
-
If the request was initiated by a
<script>
element. track
-
If the request was initiated by a
<track>
element'ssrc
. video
-
If the request was initiated by a
<video>
element'sposter
orsrc
. xmlhttprequest
-
If the request was initiated by an
XMLHttpRequest
.
Examples
Filtering resources
The initiatorType
property can be used to get specific resource timing entries only. For example, only those that were initiated by <script>
elements.
Example using a PerformanceObserver
, which notifies of new resource
performance entries as they are recorded in the browser's performance timeline. Use the buffered
option to access entries from before the observer creation.
js
const observer = new PerformanceObserver((list) => {
const scripts = list.getEntries().filter((entry) => {
return entry.initiatorType === "script";
});
console.log(scripts);
});
observer.observe({ type: "resource", buffered: true });
Example using Performance.getEntriesByType()
, which only shows resource
performance entries present in the browser's performance timeline at the time you call this method:
js
const scripts = performance.getEntriesByType("resource").filter((entry) => {
return entry.initiatorType === "script";
});
console.log(scripts);
Specifications
Specification |
---|
Resource Timing # dom-performanceresourcetiming-initiatortype |
Browser compatibility
BCD tables only load in the browser