PerformanceResourceTiming.fetchStart
fetchStart
は読み取り専用プロパティで、ブラウザーがリソースの取得を開始する直前の timestamp
を表します。
HTTP リダイレクトがある場合、このプロパティは、ユーザーエージェントがリダイレクトの最後のリソースの取得を開始する直前の時間を返します。
他の多くの PerformanceResourceTiming
プロパティとは異なり、 fetchStart
プロパティは Timing-Allow-Origin
がなくてもオリジン間リクエストで利用することができます。
値
ブラウザーがリソースの取得を開始する直前の DOMHighResTimeStamp
。
例
フェッチ時間の計測(リダイレクトを除く)
fetchStart
と responseEnd
プロパティを使用すると、(リダイレクトなしで)最終リソースを取得するのにかかった全体の時間を計測することができます。リダイレクトを含めるために、フェッチにかかった全体の時間は 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-fetchstart |
ブラウザーの互換性
BCD tables only load in the browser