PerformanceObserver: PerformanceObserver() コンストラクター

PerformanceObserver() コンストラクターは、新しい PerformanceObserver オブジェクトを、指定されたオブザーバー callback を使用して作成します。オブザーバーコールバックは、パフォーマンス項目イベントが登録された項目型に対して記録されたときに、observe() メソッドを介して呼び出されます。

構文

new PerformanceObserver(callback)

引数

callback

監視対象のパフォーマンスイベントが記録されたときに呼び出される PerformanceObserverCallback コールバック。コールバックが呼び出されるとき、以下の引数が利用できます。

entries: パフォーマンスオブザーバー項目のリストです。
observer: 上記の項目を受け取っている observer オブジェクトです。
droppedEntriesCount 省略可: バッファーが一杯になったためにバッファーから失われた項目の数です。buffered フラグを参照してください。

返値

監視対象のパフォーマンスイベントが発生したときに指定されたコールバック (callback) を呼び出す新しい 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 イベントを監視することもできます。

仕様書

Specification
Performance Timeline # dom-performanceobserver-constructor

ブラウザーの互換性

BCD tables only load in the browser