PerformanceEntry: name プロパティ

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.

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

name は PerformanceEntry インターフェイスの読み取り専用プロパティで、パフォーマンス項目の名前を表す文字列です。これは識別子の役割を果たしますが、一意である必要はありません。値はサブクラスに依存します。

値

文字列です。以下の表に示すように、値は下記の表にある通り、 PerformanceEntry オブジェクトのサブクラスによって異なります。

サブクラス 値
LargestContentfulPaint 常に空文字列を返します。
LayoutShift 常に "layout-shift" を返します。
PerformanceElementTiming 次の文字列のいずれかです。
  • "image-paint"
  • "text-paint"
PerformanceEventTiming 関連するイベントの型です。
PerformanceLongTaskTiming 次の文字列のいずれかです。
  • "cross-origin-ancestor"
  • "cross-origin-descendant"
  • "cross-origin-unreachable"
  • "multiple-contexts"
  • "same-origin-ancestor"
  • "same-origin-descendant"
  • "same-origin"
  • "self"
  • "unknown"
PerformanceMark performance.mark() を呼び出したことでマークが作成されたときに使用された名前です。
PerformanceMeasure performance.measure() を呼び出してたことで指標が作成されたときに使用された名前です。
PerformanceNavigationTiming リクエストされたリソースの解決された URL です。リクエストがリダイレクトされてもこの値は変わりません。
PerformancePaintTiming 次の文字列のいずれかです。
  • "first-paint"
  • "first-contentful-paint"
PerformanceResourceTiming リクエストされたリソースの解決された URL です。リクエストがリダイレクトされてもこの値は変わりません。
TaskAttributionTiming 常に "unknown" を返します。
VisibilityStateEntry 次の文字列のいずれかです。
  • "visible"
  • "hidden"

例

パフォーマンス項目を名前で絞り込み

PerformanceEntry が PerformanceResourceTiming オブジェクトである場合、name プロパティはリクエストされたリソースの解決した URL を参照します。 この例では、name プロパティは固有のリソース、例えばすべての SVG 画像をフィルタリングするのに有益です。

js
// SVG リソースの処理時間をログ出力
performance.getEntriesByType("resource").forEach((entry) => {
  if (entry.name.endsWith(".svg")) {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});

パフォーマンス項目を名前で取得

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

js
// この時点での "debug-marks" という名前のマークをすべてログ出力
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

// PerformanceObserver 版
// "debug-marks" という名前のマークが発生したらすべてログ出力
function perfObserver(list, observer) {
  list.getEntriesByName("debug-mark", "mark").forEach((entry) => {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });

仕様書

Specification
Performance Timeline
# dom-performanceentry-name

ブラウザーの互換性

BCD tables only load in the browser

関連情報