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 2017年9月.
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>要素によって開始された場合。 -
このリクエストがナビゲーションリクエストによって開始された場合。
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 |
ブラウザーの互換性
Loading…