PerformanceResourceTiming
=========================

**注:** この機能は Web Worker 内で利用可能です

**`PerformanceResourceTiming`** インターフェイスは、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、`XMLHttpRequest`、`<SVG>`、画像、スクリプトなどの特定のリソースを取得するのにかかる時間を判断できます。

解説
--

このインターフェイスのプロパティは、リダイレクトの開始時刻と終了時刻、フェッチの開始時刻、DNS ルックアップの開始時刻と終了時刻、レスポンスの開始時刻と終了時刻などのネットワークイベントに対する高解像度タイムスタンプを含むリソース読み込みタイムラインを作成します。さらに、このインターフェイスは、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供する他のプロパティを使用して `PerformanceEntry` を拡張します。

PerformanceEntry

PerformanceResourceTiming### 一般的なリソースタイミングメトリクス

このインターフェイスのプロパティを使用すると、特定のリソースタイミングメトリックスを計算することができます。一般的な使用される用途は次のとおりです。

* 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` と等価です。

### タイムスタンプ

このインターフェイスは、以下のタイムスタンププロパティに対応しています。図に示すように、リソースのフェッチに記録される順番で掲載されています。アルファベット順の一覧は、左のナビゲーションに掲載されています。

![リソースのフェッチに記録された順にタイムスタンプを掲載しているタイムスタンプ図](/ja/docs/Web/API/PerformanceResourceTiming/timestamp-diagram.svg)

`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` (en-US) 項目の配列です。

インスタンスメソッド
----------

`PerformanceResourceTiming.toJSON()`

この `PerformanceResourceTiming` オブジェクトの JSON 表現を返します。

例
-

### リソースのタイミング情報のログ出力

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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "resource", buffered: true });
```


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});
```

セキュリティ要件
--------

### オリジン間のタイミング情報

リソースタイミングプロパティの多くは、リソースがオリジン間リクエストであった場合に `0` または空文字列を返すよう制約されています。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

仕様書
---

| Specification |
| --- |
| Resource Timing # resources-included-in-the-performanceresourcetiming-interface |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* リソースタイミング（概要）
* リソースタイミング API の使用