recursal/MDN huggingface dataset:
PerformanceResourceTiming.redirectStart
=======================================

**`redirectStart`** は読み取り専用プロパティで、リダイレクトを開始するフェッチの開始時間を表す `timestamp` を返します。

リソースの取得時に HTTP リダイレクトがあり、いずれかのリダイレクトが現在の文書と同じ起点からのものではないが、タイミング許可チェックアルゴリズムがリダイレクトされた各リソースに合格した場合、このプロパティはリダイレクトを開始するフェッチの開始時間を返します。そうでなければ、ゼロが返されます。

リダイレクトの回数を取得する場合は、 `PerformanceNavigationTiming.redirectCount` (en-US) も参照してください。

値
-

`redirectStart` プロパティは以下の値を取ります。

* リダイレクトを開始したフェッチの開始時刻を表す `timestamp`。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### リダイレクト時間の計測

`redirectStart` と `redirectEnd` プロパティを使用して、リダイレクトにどれだけ時間がかかったかを測定することができます。


```js
const redirect = entry.redirectEnd - entry.redirectStart;
```


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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const redirect = entry.redirectEnd - entry.redirectStart;
    if (redirect > 0) {
      console.log(`${entry.name}: Redirect time: ${redirect}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const redirect = entry.redirectEnd - entry.redirectStart;
  if (redirect > 0) {
    console.log(`${entry.name}: Redirect time: ${redirect}ms`);
  }
});
```

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

`redirectStart` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

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


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-redirectstart |

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

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

関連情報
----

* `PerformanceNavigationTiming.redirectCount` (en-US)
* `Timing-Allow-Origin`
PerformanceResourceTiming.domainLookupEnd
=========================================

**`domainLookupEnd`** は読み取り専用プロパティで、ブラウザーがリソースのドメイン名検索を終了した直後の `timestamp` を返します。

ユーザーエージェントのキャッシュにドメイン情報があった場合、`domainLookupStart` と `domainLookupEnd` はユーザーエージェントがキャッシュからのドメインデータの取得を開始および終了した時刻を表します。

値
-

`domainLookupEnd` プロパティは、以下の値を取ります。

* ブラウザーがリソースのドメイン名検索を完了した直後の時刻を表す `DOMHighResTimeStamp`。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### DNS ルックアップ時間の計測

`domainLookupEnd` と `domainLookupStart` プロパティを使用すると、 DNS ルックアップの発生に対してどれだけ時間がかかるかを計測することができます。


```js
const dns = entry.domainLookupEnd - entry.domainLookupStart;
```


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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const dns = entry.domainLookupEnd - entry.domainLookupStart;
    if (dns > 0) {
      console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const dns = entry.domainLookupEnd - entry.domainLookupStart;
  if (dns > 0) {
    console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
  }
});
```

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

`domainLookupEnd` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

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


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-domainlookupend |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.encodedBodySize
=========================================

**`encodedBodySize`** は読み取り専用プロパティで、適用されたコンテンツコーディング（gzip や Brotli など）を削除する前の、ペイロード本体のフェッチ（HTTP またはキャッシュ）から受信したサイズ（オクテット単位）を表します。リソースがアプリケーションキャッシュまたはローカルリソースから取得された場合は、適用されたコンテンツコーディングを削除する前にペイロードボディのサイズを返す必要があります。

値
-

`encodedBodySize` プロパティは、以下の値を取ります。

* フェッチ（HTTP またはキャッシュ）から受け取ったペイロード本体のサイズ（オクテット単位）を表す数値で、適用されたエンコーディングを削除する前のものです。
* リソースがオリジン間リクエストで、HTTP の `Timing-Allow-Origin` ヘッダーが使用されていない場合は `0`。
例
-

### コンテンツが圧縮されているかどうかのチェック

もし `encodedBodySize` と `decodedBodySize` プロパティが null でなく異なっていれば、コンテンツは（例えば gzip や Brotli などの）圧縮されたものです。

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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const uncompressed =
      entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
    if (uncompressed) {
      console.log(`${entry.name} was not compressed!`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const uncompressed =
    entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
  if (uncompressed) {
    console.log(`${entry.name} was not compressed!`);
  }
});
```

### オリジン間のコンテンツサイズ情報

`encodedBodySize` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

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


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-encodedbodysize |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.domainLookupStart
===========================================

**`domainLookupStart`** は読み取り専用プロパティで、ブラウザーがリソースのドメイン名検索を開始する直前の `timestamp` を返します。

値
-

`domainLookupStart` プロパティは以下の値を取ります。

* ブラウザーがリソースのドメイン名検索を始める直前の `DOMHighResTimeStamp`。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### DNS ルックアップ時間の計測

`domainLookupStart` と `domainLookupEnd` プロパティを使用すると、 DNS ルックアップの発生に対してどれだけ時間がかかるかを計測することができます。


```js
const dns = entry.domainLookupEnd - entry.domainLookupStart;
```


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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const dns = entry.domainLookupEnd - entry.domainLookupStart;
    if (dns > 0) {
      console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const dns = entry.domainLookupEnd - entry.domainLookupStart;
  if (dns > 0) {
    console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
  }
});
```

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

`domainLookupStart` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

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


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-domainlookupstart |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.secureConnectionStart
===============================================

**`secureConnectionStart`** は読み取り専用プロパティで、現在の接続を保護するためにブラウザーがハンドシェイクプロセスを開始する直前に `timestamp` を返します。安全な接続が使用されていない場合、このプロパティはゼロを返します。

値
-

`secureConnectionStart` プロパティは以下の値を取り得ます。

* リソースが安全な接続を介して取得された場合、ブラウザーが現在の接続を安全にするためにハンドシェイク処理を始める直前の時刻を示す `DOMHighResTimeStamp` です。
* 安全な接続が使用されていない場合は `0` です。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### TLS ネゴシエーション時間の測定

`secureConnectionStart` と `requestStart` プロパティを使用して、TLS ネゴシエーションにどれだけ時間がかかったかを測定することができます。


```js
const tls = entry.requestStart - entry.secureConnectionStart;
```


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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tls = entry.requestStart - entry.secureConnectionStart;
    if (tls > 0) {
      console.log(`${entry.name}: TLS negotiation duration: ${tls}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tls = entry.requestStart - entry.secureConnectionStart;
  if (tls > 0) {
    console.log(`${entry.name}: TLS negotiation duration: ${tls}ms`);
  }
});
```

### オリジン外へのタイミング情報の公開

`secureConnectionStart` プロパティの値が `0` の場合、リソースは安全な接続を使用していないか、オリジン間リクエストであるかのどちらかです。オリジンを跨いでタイミング情報の確認できるようにするには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` に時刻リソースを確認することを許可するには、オリジン間リソースが送信する必要があります。


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-secureconnectionstart |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.decodedBodySize
=========================================

**`decodedBodySize`** は読み取り専用プロパティで、適用されたコンテンツエンコーディング（gzip や Brotli など）を削除した後、メッセージ本体のフェッチ（HTTP またはキャッシュ）で受信したサイズ（オクテット単位）を返します。リソースがアプリケーションキャッシュまたはローカルリソースから取得された場合、適用されたコンテンツコーディングを削除した後でペイロードのサイズを返します。

値
-

`decodedBodySize` プロパティは、以下の値を取ります。

* フェッチ（HTTP またはキャッシュ）から受け取ったペイロード本体のサイズ（オクテット単位）を表す数値で、適用されたエンコーディングを削除した後のものです。
* リソースがオリジン間リクエストで、HTTP の `Timing-Allow-Origin` ヘッダーが使用されていない場合は `0`。
例
-

### コンテンツが圧縮されているかどうかのチェック

もし `decodedBodySize` と `encodedBodySize` プロパティが null でなく異なっていれば、コンテンツは（例えば gzip や Brotli などの）圧縮されたものです。

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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const uncompressed =
      entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
    if (uncompressed) {
      console.log(`${entry.name} was not compressed!`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const uncompressed =
    entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
  if (uncompressed) {
    console.log(`${entry.name} was not compressed!`);
  }
});
```

### オリジン間のコンテンツサイズ情報

`decodedBodySize` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

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


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-decodedbodysize |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.redirectEnd
=====================================

**`redirectEnd`** は読み取り専用プロパティで、最後のリダイレクトのレスポンスの最後のバイトを受信した直後に `timestamp` を返します。

リソースを取得するとき、複数の HTTP リダイレクトがあり、いずれかのリダイレクトが現在のドキュメントとは異なる起点を持ち、タイミング許可チェックアルゴリズムがリダイレクトされたリソースごとに渡される場合、このプロパティは、最後のリダイレクトのレスポンスの最後のバイトを受信した直後の時間を返します。そうでなければ、ゼロが返されます。

リダイレクトの回数を取得する場合は、 `PerformanceNavigationTiming.redirectCount` (en-US) も参照してください。

値
-

`redirectEnd` プロパティは以下の値を取ります。

* 最後のリダイレクトのレスポンスの最後のバイトを受け取った直後の `timestamp`。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### リダイレクト時間の測定

`redirectEnd` と `redirectStart` プロパティを使用して、リダイレクトにどれだけ時間がかかったかを測定することができます。


```js
const redirect = entry.redirectEnd - entry.redirectStart;
```


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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const redirect = entry.redirectEnd - entry.redirectStart;
    if (redirect > 0) {
      console.log(`${entry.name}: Redirect time: ${redirect}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const redirect = entry.redirectEnd - entry.redirectStart;
  if (redirect > 0) {
    console.log(`${entry.name}: Redirect time: ${redirect}ms`);
  }
});
```

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

`redirectStart` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、HTTP の `Timing-Allow-Origin` レスポンスヘッダーを設定する必要があります。

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


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-redirectend |

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

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

関連情報
----

* `PerformanceNavigationTiming.redirectCount` (en-US)
* `Timing-Allow-Origin`
PerformanceResourceTiming.responseEnd
=====================================

**`responseEnd`** は読み取り専用プロパティで、ブラウザーがリソースの最後のバイトを受信した直後、または転送接続が閉じられる直前のどちらか早い方の `timestamp` を返します。

他の多くの `PerformanceResourceTiming` プロパティとは異なり、 `responseEnd` プロパティは `Timing-Allow-Origin` がなくてもオリジン間リクエストで利用することができます。

値
-

ブラウザーがリソースの最後のバイトを受け取った直後、またはトランスポート接続が閉じられる直前のいずれか最初の `DOMHighResTimeStamp` です。

例
-

### フェッチする時間の計測（リダイレクトなし）

`responseEnd` と `fetchStart` プロパティを使用すると、（リダイレクトなしで）最終リソースを取得するのにかかった全体の時間を計測することができます。リダイレクトを含めるために、フェッチにかかった全体の時間は `duration` プロパティで提供されます。


```js
const timeToFetch = entry.responseEnd - entry.fetchStart;
```


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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});
```

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-responseend |

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

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

**`responseStart`** は読み取り専用プロパティで、ブラウザーがサーバ、キャッシュ、またはローカルリソースからレスポンスの最初のバイトを受信した直後の `timestamp` を返します。

値
-

`responseStart` プロパティは以下の値を取ります。

* サーバーからのレスポンスの最初のバイトをブラウザーが受信した直後の `DOMHighResTimeStamp`。
* リソースがキャッシュから即座に取得された場合は `0` です。
* リソースがオリジン間リクエストで取得され、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されなかった場合は `0` となります。
例
-

### リクエスト時間の計測

`responseStart` と `requestStart` プロパティを使用して、リクエストにかかる時間を測定することができます。


```js
const request = entry.responseStart - entry.requestStart;
```


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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.responseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Request time: ${request}ms`);
  }
});
```

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

`responseStart` プロパティの値が `0` である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、`Timing-Allow-Origin` HTTP レスポンスヘッダーを設定する必要があります。

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


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-responsestart |

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

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

関連情報
----

* `Timing-Allow-Origin`
PerformanceResourceTiming.toJSON()
==================================

**`toJSON()`** は `PerformanceResourceTiming` インターフェイスのメソッドでシリアライザーです。この `PerformanceResourceTiming` オブジェクトの JSON 表現を返します。

構文
--


```js
toJSON()
```

### 引数

なし。

### 返値

`JSON` オブジェクトで、`PerformanceResourceTiming` オブジェクトをシリアライズしたものです。

例
-

### toJSON メソッドの使用

この例では、`entry.toJSON()` の呼び出しが `PerformanceResourceTiming` オブジェクトの JSON 表現を返します。


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

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


これはこのような JSON オブジェクトをログ出力します。


```json
{
  "name": "https://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/31px-Commons-logo.svg.png",
  "entryType": "resource",
  "startTime": 110.80000001192093,
  "duration": 11.599999994039536,
  "initiatorType": "img",
  "nextHopProtocol": "h2",
  "renderBlockingStatus": "non-blocking",
  "workerStart": 0,
  "redirectStart": 0,
  "redirectEnd": 0,
  "fetchStart": 110.80000001192093,
  "domainLookupStart": 110.80000001192093,
  "domainLookupEnd": 110.80000001192093,
  "connectStart": 110.80000001192093,
  "connectEnd": 110.80000001192093,
  "secureConnectionStart": 110.80000001192093,
  "requestStart": 117.30000001192093,
  "responseStart": 120.40000000596046,
  "responseStatus": 200,
  "responseEnd": 122.40000000596046,
  "transferSize": 0,
  "encodedBodySize": 880,
  "decodedBodySize": 880,
  "serverTiming": [
    {
      "name": "cache",
      "duration": 0,
      "description": "hit-front"
    },
    {
      "name": "host",
      "duration": 0,
      "description": "cp3061"
    }
  ]
}
```


JSON 文字列を取得するには、 `JSON.stringify(entry)` を直接使用することができます。これは `toJSON()` を自動的に呼び出します。

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-tojson |

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

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

関連情報
----

* `JSON`
PerformanceResourceTiming.transferSize
======================================

**`transferSize`** は読み取り専用プロパティで、取得したリソースのサイズ（オクテット数）を表します。サイズには、レスポンスヘッダーフィールドとレスポンスのペイロード本体（RFC7230 で定義されているとおり）が含まれます。

リソースがローカルキャッシュから取得された場合、またはオリジンを跨いだリソースの場合、このプロパティはゼロを返します。

値
-

`workerStart` プロパティは以下の値を取ることがあります。

* 取得したリソースのサイズ（オクテット数）を表します。サイズには、レスポンスヘッダーフィールドとレスポンスのペイロード本体（RFC7230 で定義されているとおり）が含まれます。
* サービスワーカーが使用されていない場合は `0`。
* リソースがオリジン間リクエストで、HTTP の `Timing-Allow-Origin` レスポンスヘッダーが使用されていない場合は `0`。
例
-

### キャッシュがヒットしたかどうかをチェック

`responseStatus` プロパティに対応していない環境では、`transferSize` プロパティを使用してキャッシュヒットを判定することができます。transferSize` がゼロで、リソースがゼロ以外のデコード本体サイズを持っている場合（リソースがsame-originであるか、`Timing-Allow-Origin`があるという意味）、リソースはローカルキャッシュからフェッチされたものであることを示します。

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


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
    console.log(`${entry.name} was loaded from cache`);
  }
});
```

### オリジン間のコンテンツサイズの情報

`transferSize` プロパティの値が `0` で、ローカルキャッシュから読み込まれなかったものである場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間リクエストのコンテンツサイズ情報を公開するには、`Timing-Allow-Origin` HTTP レスポンスヘッダーを設定する必要があります。

例えば、`https://developer.mozilla.org` にコンテンツサイズを表示することを許可するには、オリジン間リソースが送信する必要があります。


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

仕様書
---

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-transfersize |

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

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

関連情報
----

* `Timing-Allow-Origin`