PerformanceEntry: entryType プロパティ

文字列です。返値は PerformanceEntry オブジェクトのサブタイプに依存します。一部のサブタイプには複数の entryType があります。

element

要素の読み込み時間を報告します。

項目のインスタンスは PerformanceElementTiming オブジェクトです。

event

イベントの待ち時間を報告します。

項目のインスタンスは PerformanceEventTiming オブジェクトです。

first-input

first input delay (FID) を報告します。

項目のインスタンスは PerformanceEventTiming オブジェクトです。

largest-contentful-paint

画面で起動された要素の最大の描画を報告します。

項目のインスタンスは LargestContentfulPaint オブジェクトです。

layout-shift

ページ上の要素の動きに基づいて、ウェブページのレイアウトの安定性を報告します。

項目のインスタンスは LayoutShift オブジェクトです。

longtask

長いタスクのインスタンスを報告します。

項目のインスタンスは PerformanceLongTaskTiming オブジェクトです。

mark

独自のパフォーマンスマーカーを報告します。

項目のインスタンスは PerformanceMark オブジェクトです。

measure

独自のパフォーマンス指標を報告します。

項目のインスタンスは PerformanceMeasure オブジェクトです。

navigation

文書のナビゲーションタイミングを報告します。

項目のインスタンスは PerformanceNavigationTiming オブジェクトです。

paint

ページ読み込み中の文書レンダリングの主要な瞬間（最初の描画、最初のコンテンツ描画）を報告します。

項目のインスタンスは PerformancePaintTiming オブジェクトです。

resource

文書内のリソースのタイミング情報を報告します。

項目のインスタンスは PerformanceResourceTiming オブジェクトです。

taskattribution

長いタスクに大きく貢献した作業タイプを報告します。

項目のインスタンスは TaskAttributionTiming オブジェクトです。

visibility-state

タブがフォアグラウンドからバックグラウンドへ、またはその逆へ変化したときなど、ページの表示状態が変化した時刻を報告します。

項目のインスタンスは VisibilityStateEntry オブジェクトです。

entryType プロパティは、固有のパフォーマンス項目を絞り込みする際に有益なものです。例えば、すべてのスクリプトリソースを調べたい場合、 entryType が "resource" で initiatorType が "script" であることをチェックしてください。

const scriptResources = performance
  .getEntries()
  .filter(
    (entry) =>
      entry.entryType === "resource" && entry.initiatorType === "script",
  );
console.log(scriptResources);

Performance と PerformanceObserver はどちらも、パフォーマンス項目を種類別に直接取得するメソッドを提供します。代わりに Performance.getEntriesByType() または PerformanceObserverEntryList.getEntriesByType() を使用することができます。

また、 PerformanceObserver で監視する場合、 observe() メソッドはオプションオブジェクトに entryTypes の配列を受け取り、そこで監視する項目の種類を決めることができます。

// この時点ですべてのリソース項目をログ出力
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(`${entry.name}'s duration: ${entry.duration}`);
});

// PerformanceObserver 版
// 利用できるすべてのリソース項目をログ出力
function perfObserver(list, observer) {
  list.getEntriesByType("resource").forEach((entry) => {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["resource", "navigation"] });

• PerformanceObserver.supportedEntryTypes
• Performance.getEntriesByType()
• PerformanceObserverEntryList.getEntriesByType()