PerformanceResourceTiming.fetchStart
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.
fetchStart
は読み取り専用プロパティで、ブラウザーがリソースの取得を開始する直前の timestamp
を表します。
HTTP リダイレクトがある場合、このプロパティは、ユーザーエージェントがリダイレクトの最後のリソースの取得を開始する直前の時間を返します。
他の多くの PerformanceResourceTiming
プロパティとは異なり、 fetchStart
プロパティは Timing-Allow-Origin
がなくてもオリジン間リクエストで利用することができます。
値
ブラウザーがリソースの取得を開始する直前の DOMHighResTimeStamp
。
例
フェッチ時間の計測(リダイレクトを除く)
fetchStart
と responseEnd
プロパティを使用すると、(リダイレクトなしで)最終リソースを取得するのにかかった全体の時間を計測することができます。リダイレクトを含めるために、フェッチにかかった全体の時間は duration
プロパティで提供されます。
const timeToFetch = entry.responseEnd - entry.fetchStart;
PerformanceObserver
を使用した例です。このオブジェクトは、新しい resource
パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered
オプションを使用します。
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
パフォーマンス項目のみを表示します。
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