PerformanceResourceTiming.initiatorType

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

initiatorType は読み取り専用プロパティで、リソースの読み込みを開始したウェブプラットフォームの機能を表す文字列です。

メモ: このプロパティは、読み込まれるコンテンツの種類を表すものではありません。.css ファイルは <link> 要素を使用して読み込むことができ、 initiatorTypelink となります。CSS ファイルで background: url() を使用して画像を読み込んだ場合、 initiatorTypeimg ではなく css になります。

initatorType プロパティは以下の値を取ることができ、どの条件にも一致しない場合は other を取ることができます。

audio

このリクエストが <audio> 要素の src 属性によって開始された場合。

beacon

このリクエストが navigator.sendBeacon() メソッドによって開始された場合。

body

このリクエストが <body> 要素の background 属性によって開始された場合。

css

このリクエストが CSS の url() 関数によって開始された場合。

early-hint

このリクエストが 103Early Hint レスポンスによって開始された場合。

embed

このリクエストが <embed> 要素の src 属性によって開始された場合。

fetch

このリクエストが fetch() メソッドによって開始された場合。

frame

このリクエストが <frame> 要素の読み込みによって開始された場合。

iframe

このリクエストが <iframe> 要素の src 属性によって開始された場合。

icon 非標準

このリクエストがファビコンによって開始された場合。標準外であり、Safari でのみ報告されます。

image

このリクエストが <image> 要素によって開始された場合。

img

このリクエストが <img> 要素の src または srcset 属性によって開始された場合。

input

このリクエストが <input> 要素の image 型によって開始された場合。

このリクエストが <link> 要素によって開始された場合。

このリクエストがナビゲーションリクエストによって開始された場合。

object

このリクエストが <object> 要素によって開始された場合。

ping

このリクエストが <a> 要素の ping によって開始された場合。

script

このリクエストが <script> 要素によって開始された場合。

track

このリクエストが <track> 要素の src によって開始された場合。

video

このリクエストが <video> 要素の poster または src によって開始された場合。

xmlhttprequest

このリクエストが XMLHttpRequest によって開始された場合。

リソースのフィルタリング

initiatorType プロパティを使用すると、特定のリソー スタイミング項目のみを取得することができます。例えば、<script> 要素によって開始されたものだけを取得することができます。

PerformanceObserver を使用した例です。このオブジェクトは、新しい resource パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered オプションを使用します。

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 });

Performance.getEntriesByType() を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource パフォーマンス項目のみを表示します。

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

仕様書

Specification
Resource Timing
# dom-performanceresourcetiming-initiatortype

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
initiatorType

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Has more compatibility info.