PerformanceObserver

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

* Some parts of this feature may have varying levels of support.

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

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