PerformanceObserver

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

メモ: この機能はウェブワーカー内で利用可能です。

PerformanceObserver インターフェイスは、パフォーマンス測定イベントを監視し、ブラウザーのパフォーマンスタイムラインに記録されるものとして、新しいパフォーマンス項目の通知を受けるために使用されます。

コンストラクター

PerformanceObserver()

新しい PerformanceObserver オブジェクトを作成して返します。

静的プロパティ

PerformanceObserver.supportedEntryTypes 読取専用

ユーザーエージェントが対応している entryType 値の配列を返します。

インスタンスメソッド

PerformanceObserver.observe()

観測する項目型を設定します。パフォーマンスオブザーバーのコールバック関数は、指定した entryTypes のいずれかにパフォーマンス項目が記録されたときに呼び出されます。

PerformanceObserver.disconnect()

パフォーマンスオブザーバーコールバックがパフォーマンス項目を受け取るのを停止します。

PerformanceObserver.takeRecords()

パフォーマンスオブザーバーに格納されているパフォーマンス項目の現在のリストを空にして返します。

例

PerformanceObserver の作成

次の例では、 "mark" (PerformanceMark) および "measure" (PerformanceMeasure) イベントを監視する PerformanceObserver を作成します。 perfObserver コールバックは list (PerformanceObserverEntryList) を提供し、監視しているパフォーマンス項目を取得することができます。

js
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"] });

仕様書

Specification
Performance Timeline
# dom-performanceobserver

ブラウザーの互換性

BCD tables only load in the browser

関連情報