PerformanceResourceTiming.redirectEnd
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年9月.
redirectEnd は読み取り専用プロパティで、最後のリダイレクトのレスポンスの最後のバイトを受信した直後に timestamp を返します。
リソースを取得するとき、複数の HTTP リダイレクトがあり、いずれかのリダイレクトが現在のドキュメントとは異なる起点を持ち、タイミング許可チェックアルゴリズムがリダイレクトされたリソースごとに渡される場合、このプロパティは、最後のリダイレクトのレスポンスの最後のバイトを受信した直後の時間を返します。そうでなければ、ゼロが返されます。
リダイレクトの回数を取得する場合は、 PerformanceNavigationTiming.redirectCount も参照してください。
値
redirectEnd プロパティは以下の値を取ります。
- 最後のリダイレクトのレスポンスの最後のバイトを受け取った直後の
timestamp。 - リソースがキャッシュから即座に取得された場合は
0です。 - リソースがオリジン間リクエストで取得され、HTTP の
Timing-Allow-Originレスポンスヘッダーが使用されなかった場合は0となります。
例
リダイレクト時間の測定
redirectEnd と redirectStart プロパティを使用して、リダイレクトにどれだけ時間がかかったかを測定することができます。
const redirect = entry.redirectEnd - entry.redirectStart;
PerformanceObserver を使用した例です。このオブジェクトは、新しい resource パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered オプションを使用します。
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 パフォーマンス項目のみを表示します。
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://big.rakal.top にタイミングリソースを見ることを許可するには、オリジン間リソースで次のものを送信する必要があります。
Timing-Allow-Origin: https://big.rakal.top
仕様書
| Specification |
|---|
| Resource Timing # dom-performanceresourcetiming-redirectend |
ブラウザーの互換性
Loading…