PerformanceResourceTiming.requestStart

値

requestStart プロパティは以下の値を取ります。

• ブラウザーがサーバーからリソースのリクエストを始める直前の時刻を表す DOMHighResTimeStamp です。
• リソースがキャッシュから即座に取得された場合は 0 です。
• リソースがオリジン間リクエストで取得され、HTTP の Timing-Allow-Origin レスポンスヘッダーが使用されなかった場合は 0 となります。
• リソースがキャンセルされたリクエストである場合は 0 です。

firstInterimResponseStart が 0 以外の値である場合、対応しているブラウザーでは、その値は requestStart と同じ値であることを示します。

中間レスポンスがない場合、requestStart は finalResponseHeadersStart と同じ値になり、firstInterimResponseStart は 0 になります。

例

リクエスト時間の計測

requestStart と responseStart プロパティを使用して、リクエストにかかる時間を測定することができます。

const request = entry.responseStart - entry.requestStart;

PerformanceObserver を使用した例です。このオブジェクトは、新しい resource パフォーマンス項目がブラウザーのパフォーマンスタイムラインに記録されると、それを通知します。オブザーバーが作成される前の項目にアクセスするために buffered オプションを使用します。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

Performance.getEntriesByType() を使用した例です。このメソッドを呼び出した時点でブラウザー上のパフォーマンスタイムラインに存在する resource パフォーマンス項目のみを表示します。

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.responseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Request time: ${request}ms`);
  }
});

オリジン間のタイミング情報

requestStart プロパティの値が 0 である場合、そのリソースはオリジン間リクエストである可能性があります。オリジン間のタイミング情報を見るためには、Timing-Allow-Origin HTTP レスポンスヘッダーを設定する必要があります。

例えば、https://developer.mozilla.org にタイミングリソースを見ることを許可するには、オリジン間リソースが送信する必要があります。

Timing-Allow-Origin: https://developer.mozilla.org

仕様書

ブラウザーの互換性

関連情報

• Timing-Allow-Origin