Performance API

October 1, 2020

Performance API # Performance APIは、Resource Timing APIのデータによって強化されたパフォーマンス関連の情報へのアクセスを提供します。このAPIは、持続時間のようなネットワークリクエストの時間情報を提供しますが、サーバーから送られたTiming-Allow-Origin: *ヘッダーがある場合、転送サイズとドメイン検索時間も提供されます。 このデータには、 performance.getEntriesまたはperformance.getEntriesByNameを使ってアクセスすることができます。また、performance.now()の差分を使って実行時間を取得することもできますが、これはミリ秒しか提供しないため、Chromeのfetchでは精度が低い可能性があります。 ネットワークのduration # リクエストのNetwork durationを performance API から取得することができます。 以下のスニペットはリクエストを実行し、200ms後に performance オブジェクトから持続時間を取得します。 async function getNetworkDuration(url) { let href = new URL(url).href; // duration = 0 のリクエストがあるため、fetch()の代わりに画像を使用する。 let image = new Image().src = href; // performance.getEntriesByName()に追加されるリクエストを待ちます。 await new Promise(r => setTimeout(r, 200)); // 最後に追加された時間を取得する let res = performance.getEntriesByName(href).pop(); console.log("Request duration: " + res.duration); return res.duration } await getNetworkDuration('https://example.org'); info 他のブラウザと異なり、Firefoxはミリ秒単位で測定値を提供します。 X-Frame-Optionsを検知する # 埋め込み内にページを表示する場合 (たとえば、X-Frame-Options ヘッダーのため)、Chrome の performance オブジェクトに追加されません。 ...