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's src attribute.
beacon: If the request was initiated by a navigator.sendBeacon() method.
body: If the request was initiated by a <body> element's background 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's src 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's src 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's src or srcset attribute.
input: If the request was initiated by an <input> element of type image.
link: If the request was initiated by a <link> element.
navigation: 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's ping.
script: If the request was initiated by a <script> element.
track: If the request was initiated by a <track> element's src.
video: If the request was initiated by a <video> element's poster or src.
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.

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:

const scripts = performance.getEntriesByType("resource").filter((entry) => {
  return entry.initiatorType === "script";
});
console.log(scripts);

Specifications

Specification
Resource Timing # dom-performanceresourcetiming-initiatortype

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`initiatorType`	43	12	31	10	30	11	43	43	31	30	11	4.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/initiatorType

Docs

Docs4dev

Title here