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> 要素を使用して読み込むことができ、 initiatorType が link となります。CSS ファイルで background: url() を使用して画像を読み込んだ場合、 initiatorType は img ではなく css になります。

値

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

audio: このリクエストが <audio> 要素の src 属性によって開始された場合。
beacon: このリクエストが navigator.sendBeacon() メソッドによって開始された場合。
body: このリクエストが <body> 要素の background 属性によって開始された場合。
css: このリクエストが CSS の url() 関数によって開始された場合。
early-hint: このリクエストが 103 の Early Hint レスポンスによって開始された場合。
embed: このリクエストが <embed> 要素の src 属性によって開始された場合。
fetch: このリクエストが fetch() メソッドによって開始された場合。
frame: このリクエストが <frame> 要素の読み込みによって開始された場合。
iframe: このリクエストが <iframe> 要素の src 属性によって開始された場合。
icon 非標準: このリクエストがファビコンによって開始された場合。標準外であり、Safari でのみ報告されます。
image: このリクエストが <image> 要素によって開始された場合。
img: このリクエストが <img> 要素の src または srcset 属性によって開始された場合。
input: このリクエストが <input> 要素の image 型によって開始された場合。
link: このリクエストが <link> 要素によって開始された場合。
navigation: このリクエストがナビゲーションリクエストによって開始された場合。
object: このリクエストが <object> 要素によって開始された場合。
ping: このリクエストが <a> 要素の ping によって開始された場合。
script: このリクエストが <script> 要素によって開始された場合。
track: このリクエストが <track> 要素の src によって開始された場合。
video: このリクエストが <video> 要素の poster または src によって開始された場合。
xmlhttprequest: このリクエストが XMLHttpRequest によって開始された場合。

例

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

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

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

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 パフォーマンス項目のみを表示します。

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

仕様書

Specification
Resource Timing # dom-performanceresourcetiming-initiatortype

ブラウザーの互換性

BCD tables only load in the browser