PerformanceEntry: entryType プロパティ

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.

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

entryType プロパティは読み取り専用で、この項目が表すパフォーマンス指標の種類を表す文字列です。

対応している entryTypes はすべて、静的プロパティである PerformanceObserver.supportedEntryTypes を使用して得ることができます。

文字列です。返値は 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 オブジェクトです。

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

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

paint

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

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

resource

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

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

taskattribution

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

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

visibility-state

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

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

パフォーマンス項目を種類別に絞り込み

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

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

パフォーマンス項目を種類別に取得

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

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

js
// この時点ですべてのリソース項目をログ出力
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"] });

仕様書

Specification
Performance Timeline
# dom-performanceentry-entrytype

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
entryType

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報