PerformanceResourceTiming.responseStatus
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
responseStatus
は読み取り専用のプロパティで、リソースを読み取る際に返される HTTP レスポンスステータスコードを表します。
このプロパティはフェッチ API の Response.status
に対応します。
値
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
仕様書
Specification |
---|
Resource Timing # dom-performanceresourcetiming-responsestatus |
ブラウザーの互換性
BCD tables only load in the browser