PerformanceResourceTiming.responseEnd

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.

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

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

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

フェッチする時間の計測(リダイレクトなし)

responseEndfetchStart プロパティを使用すると、(リダイレクトなしで)最終リソースを取得するのにかかった全体の時間を計測することができます。リダイレクトを含めるために、フェッチにかかった全体の時間は 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
responseEnd

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.