PerformanceResourceTiming.responseStatus

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

• リソースを読み取った際に返された HTTP レスポンスステータスコードを示す数値。
• CORS のチェックに失敗した場合は 0。
• 別オリジンの <iframe> オブジェクトの場合は 0。

responseStatus プロパティをお使用して、304 Not Modified でキャッシュされたリソースを確認することができます。

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.responseStatus === 304) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.responseStatus === 304) {
    console.log(`${entry.name} was loaded from cache`);
  }
});

また、 responseStatus が利用できない場合は、 transferSize プロパティは 0 を返します。

responseStatus プロパティの値が 0 である場合、そのリソースはオリジン間リクエストである可能性があります。オリジンの外へのレスポンスステータスコードの表示を許可するには、CORS の HTTP の Access-Control-Allow-Origin レスポンスヘッダーを設定する必要があります。

例えば、https://developer.mozilla.org にレスポンスステータスコードを取得させるためには、オリジン間リソースが送信する必要があります。

Access-Control-Allow-Origin: https://developer.mozilla.org

• HTTP レスポンスステータスコード
• Response.status
• CORS