PerformanceEntry.name — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceEntry.name

Beschreibung

PerformanceEntry.name ist ein schreibgeschützter String, der einen Eintrag der Performance Timeline benennt. Die Eigenschaft ist auf allen abgeleiteten Schnittstellen vorhanden, etwa PerformanceMark, PerformanceMeasure, PerformanceResourceTiming, PerformanceNavigationTiming und PerformancePaintTiming. Was im String steht, hängt vom Wert von entryType ab:

mark / measure: der Name, den Sie bei performance.mark() bzw. performance.measure() angegeben haben.
resource: die aufgelöste URL der geladenen Ressource.
navigation: die URL des Dokuments.
paint: "first-paint" oder "first-contentful-paint".
event / first-input: der Ereignistyp, z. B. "click" oder "keydown".
longtask: die Zuordnung des Tasks, z. B. "self", "same-origin-ancestor", "cross-origin-descendant", "multiple-contexts" oder "unknown".
element: "image-paint" oder "text-paint".
largest-contentful-paint: immer ein leerer String.
layout-shift: immer "layout-shift".
visibility-state: "visible" oder "hidden".
taskattribution: immer "unknown".

In der Praxis brauchen Sie name vor allem, um Einträge zu filtern. Beispiele: Sie suchen die Ladezeit einer bestimmten Ressource heraus, lesen eigene Messpunkte aus oder unterscheiden in einem PerformanceObserver zwischen First Paint und First Contentful Paint. Die Methode performance.getEntriesByName() filtert direkt nach diesem Wert.

Rückgabewert

Typ

string

Beschreibung

Der Name des Leistungseintrags. Sein Format hängt vom entryType ab: ein eigener Name, eine URL, ein Ereignistyp, ein fester Bezeichner oder ein leerer String.

Beispiele

Eigene Messpunkte setzen und per Name auslesen

performance.mark('daten-laden-start');
const res = await fetch('/api/produkte');
const produkte = await res.json();
performance.mark('daten-laden-ende');

performance.measure('daten-laden', 'daten-laden-start', 'daten-laden-ende');

for (const entry of performance.getEntriesByType('measure')) {
  console.log(`${entry.name}: ${entry.duration.toFixed(1)} ms`);
}

daten-laden: 142.7 ms

Ladezeiten bestimmter Ressourcen per URL filtern

const langsameBilder = performance
  .getEntriesByType('resource')
  .filter((e) => /\.(png|jpe?g|webp)$/i.test(new URL(e.name).pathname))
  .filter((e) => e.duration > 200)
  .map((e) => ({ url: e.name, ms: Math.round(e.duration) }));

console.table(langsameBilder);

┌─────────┬───────────────────────────────────────┬─────┐ │ (index) │ url │ ms │ ├─────────┼───────────────────────────────────────┼─────┤ │ 0 │ 'https://example.com/img/hero.jpg' │ 412 │ └─────────┴───────────────────────────────────────┴─────┘

First Contentful Paint mit PerformanceObserver erfassen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP:', Math.round(entry.startTime), 'ms');
      observer.disconnect();
    }
  }
});

observer.observe({ type: 'paint', buffered: true });

FCP: 834 ms

Nach Name suchen mit getEntriesByName()

performance.mark('render');
// ... Rendering ...
performance.mark('render');

const marks = performance.getEntriesByName('render', 'mark');
console.log(marks.length, marks.map((m) => m.name));

2 [ 'render', 'render' ]

// Wichtig · Fallstricke

Namen sind nicht eindeutig: Wenn Sie performance.mark() mehrfach mit demselben Namen aufrufen, entstehen mehrere Einträge. performance.measure() mit einem Mark-Namen verwendet immer das neueste Mark dieses Namens. Mit performance.clearMarks(name) entfernen Sie alte Einträge.
Aufgelöste URLs: Bei resource und navigation steht in name die vollständige, absolute URL einschließlich Query-String und Fragment. Vergleichen Sie also nicht mit relativen Pfaden. Parsen Sie den Wert stattdessen mit new URL(entry.name).
Datenschutz: Ressourcen-URLs können Tokens oder personenbezogene Parameter enthalten. Bereinigen Sie name, bevor Sie Messwerte an einen Analysedienst senden.
Leerer Name: Einträge vom Typ largest-contentful-paint haben immer name === "". Filtern Sie hier nach entryType statt nach name.
Reservierte Namen: Wenn Sie performance.mark() mit einem Namen aus PerformanceTiming aufrufen (z. B. "navigationStart"), wirft das einen SyntaxError.
Kompatibilität: Die Eigenschaft wird überall unterstützt, auch in Web Workern und in Node.js (perf_hooks). Welche Eintragstypen es gibt (z. B. layout-shift, longtask, element), ist je nach Browser verschieden. Viele davon gibt es nur in Chromium-Browsern. Prüfen Sie das mit PerformanceObserver.supportedEntryTypes.

Siehe auch

Performance.mark() Performance.measure() PerformanceEntry.startTime PerformanceEntry.duration PerformanceEntry.entryType