PerformanceResourceTiming.responseStatus

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

responseStatus は読み取り専用のプロパティで、リソースを読み取る際に返される HTTP レスポンスステータスコードを表します。

このプロパティはフェッチ APIResponse.status に対応します。

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

キャッシュがヒットしたかどうかをチェック

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

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

js
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 パフォーマンス項目のみを表示します。

js
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 にレスポンスステータスコードを取得させるためには、オリジン間リソースが送信する必要があります。

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

仕様書

Specification
Resource Timing
# dom-performanceresourcetiming-responsestatus

ブラウザーの互換性

BCD tables only load in the browser

関連情報