PerformanceEntry: name プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年9月以降、すべてのブラウザーで利用可能です。

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

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 画像をフィルタリングするのに有益です。

// 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() を使用することができます。

// この時点での "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"] });