PerformanceObserver: supportedEntryTypes 静的プロパティ

supportedEntryTypesPerformanceObserver インターフェイスの静的読み取り専用プロパティで、このユーザーエージェントが対応している entryType 値の配列を返します。

対応している項目のリストはブラウザーごとに異なり、進化しているため、このプロパティによってウェブ開発者は利用できる項目を調べることができます。

PerformanceEntry.entryType 値の配列です。

コンソールを使用して対応している値をチェック

ブラウザーの対応している entryType 値を探すには、 PerformanceObserver.supportedEntryTypes とコンソールに入力します。これは対応している値の配列を返します。

js
PerformanceObserver.supportedEntryTypes;

// Chrome 99 では ["element", "event", "first-input", "largest-contentful-paint", "layout-shift", "longtask", "mark", "measure", "navigation", "paint", "resource"] を返す

未対応の型のチェック

以下の関数は、使用可能な項目型の配列に対応しているか調べます。サポートされていない型はコンソールにログ出力されますが、この情報をクライアント側の分析にログ出力して、具体的な型が監視できなかったことを示すこともできます。

js
function detectSupport(entryTypes) {
  for (const entryType of entryTypes) {
    if (!PerformanceObserver.supportedEntryTypes.includes(entryType)) {
      console.log(entryType);
    }
  }
}

detectSupport(["resource", "mark", "first-input", "largest-contentful-paint"]);

仕様書

Specification
Performance Timeline
# supportedentrytypes-attribute

ブラウザーの互換性

BCD tables only load in the browser