PerformanceResourceTiming.responseEnd
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年9月以降、すべてのブラウザーで利用可能です。
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`);
}
});
仕様書
| 仕様書 |
|---|
| Resource Timing # dom-performanceresourcetiming-responseend |