PerformanceObserver

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

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

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

コンストラクター

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

静的プロパティ

PerformanceObserver.supportedEntryTypes 読取専用: ユーザーエージェントが対応している entryType 値の配列を返します。

インスタンスメソッド

PerformanceObserver.observe(): 観測する項目型を設定します。パフォーマンスオブザーバーのコールバック関数は、指定した entryTypes のいずれかにパフォーマンス項目が記録されたときに呼び出されます。
PerformanceObserver.disconnect(): パフォーマンスオブザーバーコールバックがパフォーマンス項目を受け取るのを停止します。
PerformanceObserver.takeRecords(): パフォーマンスオブザーバーに格納されているパフォーマンス項目の現在のリストを空にして返します。

次の例では、 "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"] });