PerformanceObserver: PerformanceObserver() コンストラクター
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
PerformanceObserver() コンストラクターは、新しい PerformanceObserver オブジェクトを、指定されたオブザーバー callback を使用して作成します。オブザーバーコールバックは、パフォーマンス項目イベントが登録された項目型に対して記録されたときに、observe() メソッドを介して呼び出されます。
構文
new PerformanceObserver(callback)
引数
返値
監視対象のパフォーマンスイベントが発生したときに指定されたコールバック (callback) を呼び出す新しい PerformanceObserver オブジェクト。
例
PerformanceObserver の作成
次の例では、 "mark" (PerformanceMark) および "measure" (PerformanceMeasure) イベントを監視する PerformanceObserver を作成します。
perfObserver コールバックは list (PerformanceObserverEntryList) を提供し、監視しているパフォーマンス項目を取得することができます。
function perfObserver(list, observer) {
list.getEntries().forEach((entry) => {
if (entry.entryType === "mark") {
console.log(`${entry.name}'s startTime: ${entry.startTime}`);
}
if (entry.entryType === "measure") {
console.log(`${entry.name}'s duration: ${entry.duration}`);
}
});
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
失われたバッファー項目
PerformanceObserver に buffered フラグを使用して、過去のパフォーマンス項目を使用することができます。
ただし、バッファーサイズには制限があります。パフォーマンスオブザーバーのコールバックにはオプションで droppedEntriesCount 引数が格納され、バッファーストレージが一杯になったために失われた項目の数を通知します。
function perfObserver(list, observer, droppedEntriesCount) {
list.getEntries().forEach((entry) => {
// do something with the entries
});
if (droppedEntriesCount > 0) {
console.warn(
`${droppedEntriesCount} entries got dropped due to the buffer being full.`,
);
}
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ type: "resource", buffered: true });
通常、リソースタイミング項目はたくさんあり、これらの項目については、 performance.setResourceTimingBufferSize() を使用してより大きなバッファーを設定し、 resourcetimingbufferfull イベントを監視することもできます。
仕様書
| 仕様書 |
|---|
| Performance Timeline # dom-performanceobserver-performanceobserver |