PerformanceResourceTiming
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.
メモ: この機能はウェブワーカー内で利用可能です。
PerformanceResourceTiming
インターフェイスは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、XMLHttpRequest
、<SVG>
、画像、スクリプトなどの特定のリソースを取得するのにかかる時間を判断できます。
解説
このインターフェイスのプロパティは、リダイレクトの開始時刻と終了時刻、フェッチの開始時刻、DNS ルックアップの開始時刻と終了時刻、レスポンスの開始時刻と終了時刻などのネットワークイベントに対する高解像度タイムスタンプを含むリソース読み込みタイムラインを作成します。さらに、このインターフェイスは、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供する他のプロパティを使用して PerformanceEntry
を拡張します。
一般的なリソースタイミングメトリクス
このインターフェイスのプロパティを使用すると、特定のリソースタイミングメトリックスを計算することができます。一般的な使用される用途は次のとおりです。
- TCP ハンドシェイク時間の計測 (
connectEnd
-connectStart
) - DNS ルックアップ時間の計測 (
domainLookupEnd
-domainLookupStart
) - リダイレクト時間の計測 (
redirectEnd
-redirectStart
) - リクエスト時間の計測 (
responseStart
-requestStart
) - TLS ネゴシエーション時間の計測 (
requestStart
-secureConnectionStart
) - フェッチ時間の計測(リダイレクトなし) (
responseEnd
-fetchStart
) - サービスワーカー処理時間の計測 (
fetchStart
-workerStart
) - コンテンツが圧縮されていたかのチェック (
decodedBodySize
がencodedBodySize
と同じにならない) - ローカルキャッシュがヒットしたかどうかのチェック (
transferSize
が0
になる) - 最新の高速プロトコルが使用されているかどうかのチェック (
nextHopProtocol
が HTTP/2 または HTTP/3) - リソースがレンダーブロッキングであることのチェック (
renderBlockingStatus
)
インスタンスプロパティ
PerformanceEntry
からの継承
このインターフェイスは、以下のように修飾し制約することによって、リソースパフォーマンス項目型の PerformanceEntry
プロパティを拡張します。
PerformanceEntry.duration
読取専用-
timestamp
プロパティでresponseEnd
とstartTime
の差を返します。 PerformanceEntry.entryType
読取専用-
"resource"
を返します。 PerformanceEntry.name
読取専用-
このリソースの URL を返します。
PerformanceEntry.startTime
読取専用-
リソースのフェッチを始めた時刻の
timestamp
を返します。この値はPerformanceResourceTiming.fetchStart
と等価です。
タイムスタンプ
このインターフェイスは、以下のタイムスタンププロパティに対応しています。図に示すように、リソースのフェッチに記録される順番で掲載されています。アルファベット順の一覧は、左のナビゲーションに掲載されています。
PerformanceResourceTiming.redirectStart
読取専用-
リダイレクトを開始するフェッチの開始時刻を表す
DOMHighResTimeStamp
です。 PerformanceResourceTiming.redirectEnd
読取専用-
最後のリダイレクトのレスポンスの最後のバイトを受信した直後の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.workerStart
読取専用-
サービスワーカースレッドが既に実行されている場合は
FetchEvent
を配信する直前、実行されていない場合はサービスワーカースレッドを始める直前のDOMHighResTimeStamp
を返します。リソースがサービスワーカーに介入されない場合、このプロパティは常に 0 を返します。 PerformanceResourceTiming.fetchStart
読取専用-
ブラウザーがリソースのフェッチを始める直前の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.domainLookupStart
読取専用-
ブラウザーがリソースのドメイン名検索を始める直前の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.domainLookupEnd
読取専用-
ブラウザーがリソースのドメイン名検索を完了した直後の時刻を表す
DOMHighResTimeStamp
です。 PerformanceResourceTiming.connectStart
読取専用-
ブラウザーがリソースを取得するためにサーバーとの接続を始める直前の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.secureConnectionStart
読取専用-
ブラウザーが現在の接続を保護するためにハンドシェイク処理を開始する直前の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.connectEnd
読取専用-
ブラウザーがリソースを取得するためにサーバーとの接続を完了した直後の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.requestStart
読取専用-
ブラウザーがサーバーからリソースのリクエストを始める直前の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.responseStart
読取専用-
ブラウザーがサーバーからレスポンスの最初のバイトを受け取った直後の
DOMHighResTimeStamp
です。 PerformanceResourceTiming.responseEnd
読取専用-
ブラウザーがリソースの最後のバイトを受信した直後、またはトランスポート接続が閉じられる直前の、どちらか早い方の
DOMHighResTimeStamp
です。
追加のリソース情報
さらに、このインターフェイスは、リソースに関するより詳細な情報を含む以下のプロパティを公開します。
PerformanceResourceTiming.decodedBodySize
読取専用-
メッセージ本体のフェッチ(HTTPまたはキャッシュ)から受け取ったサイズ(オクテット単位)を表す数値で、適用されたコンテンツエンコーディングを削除した後の値です。
PerformanceResourceTiming.encodedBodySize
読取専用-
フェッチ(HTTP またはキャッシュ)から受け取ったペイロード本体のサイズ(オクテット単位)を表す数値で、適用されたコンテンツエンコーディングを削除する前のものです。
PerformanceResourceTiming.initiatorType
読取専用-
文字列で、パフォーマンス項目を開始したウェブプラットフォーム機能を表します。
PerformanceResourceTiming.nextHopProtocol
読取専用-
文字列で、 ALPN プロトコル ID (RFC7301) によって識別される、リソースを取得するために使用されたネットワークプロトコルを表します。
PerformanceResourceTiming.renderBlockingStatus
読取専用-
レンダーブロッキングの状態を表す文字列。"
blocking
" または "non-blocking
" のどちらかです。 PerformanceResourceTiming.responseStatus
Experimental 読取専用-
リソースのフェッチ時に返される HTTP レスポンスステータスコードを表す数値です。
PerformanceResourceTiming.transferSize
読取専用-
フェッチされたリソースのサイズ (オクテット単位)を表す数値。このサイズには、レスポンスヘッダーフィールドとレスポンスのペイロード本体が含まれます。
PerformanceResourceTiming.serverTiming
読取専用-
サーバーのタイミングメトリクスを格納した
PerformanceServerTiming
項目の配列です。
インスタンスメソッド
PerformanceResourceTiming.toJSON()
-
この
PerformanceResourceTiming
オブジェクトの JSON 表現を返します。
例
リソースのタイミング情報のログ出力
PerformanceObserver
を使用した例です。このオブジェクトは、新しい resource
パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered
オプションを使用します。
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(entry);
});
});
observer.observe({ type: "resource", buffered: true });
Performance.getEntriesByType()
を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource
パフォーマンス項目のみを表示します。
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
console.log(entry);
});
セキュリティ要件
オリジン間のタイミング情報
リソースタイミングプロパティの多くは、リソースがオリジン間リクエストであった場合に 0
または空文字列を返すよう制約されています。オリジン間のタイミング情報を見るためには、HTTP の Timing-Allow-Origin
レスポンスヘッダーを設定する必要があります。
例えば、https://developer.mozilla.org
にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。
Timing-Allow-Origin: https://developer.mozilla.org
仕様書
Specification |
---|
Resource Timing # resources-included-in-the-performanceresourcetiming-interface |
ブラウザーの互換性
BCD tables only load in the browser