PerformanceResourceTiming.initiatorType

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 Non-standard

このリクエストがファビコンによって開始された場合。標準外であり、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

ブラウザーの互換性

BCD tables only load in the browser