PerformanceEntry — Schnittstelle · JavaScript-Referenz

Signatur

interface PerformanceEntry

Beschreibung

PerformanceEntry ist die gemeinsame Basisschnittstelle aller Einträge der Performance Timeline. Jeder Eintrag beschreibt einen einzelnen Messwert: das Laden einer Ressource, eine selbst gesetzte Markierung, einen Paint-Zeitpunkt, eine lange Aufgabe usw. Man erzeugt PerformanceEntry-Objekte nicht direkt, sondern erhält sie über performance.getEntries(), getEntriesByType(), getEntriesByName() oder einen PerformanceObserver.

Alle Einträge haben vier gemeinsame, schreibgeschützte Eigenschaften:

name – Bezeichner des Eintrags (bei Ressourcen die URL, bei Markierungen der vergebene Name).
entryType – Art des Eintrags, z. B. "mark", "measure", "resource", "navigation", "paint", "longtask", "largest-contentful-paint", "layout-shift", "event".
startTime – Startzeitpunkt als DOMHighResTimeStamp in Millisekunden relativ zu performance.timeOrigin.
duration – Dauer in Millisekunden (bei punktuellen Ereignissen wie mark oder paint meist 0).

Dazu kommt die Methode toJSON(), die eine serialisierbare Darstellung liefert – praktisch, um Messwerte per navigator.sendBeacon() an einen Analyse-Server zu senden. Konkrete Untertypen wie PerformanceResourceTiming, PerformanceMark, PerformanceMeasure oder PerformanceNavigationTiming erweitern die Basis um spezifische Felder.

Einsatzgebiete sind Real-User-Monitoring (RUM), das Messen eigener Code-Abschnitte, das Aufspüren langsamer Ressourcen und das Erfassen von Core Web Vitals.

Rückgabewert

Typ

PerformanceEntry

Beschreibung

Instanzen werden nur vom Browser erzeugt (über performance.getEntries*(), performance.mark()/measure() oder PerformanceObserver). Eigenschaften: name (string), entryType (string), startTime (DOMHighResTimeStamp), duration (DOMHighResTimeStamp); Methode toJSON() → object.

Beispiele

Eigene Messung mit mark() und measure()

performance.mark('daten-start');

const res = await fetch('/api/produkte');
const produkte = await res.json();

performance.mark('daten-ende');
const messung = performance.measure('daten-laden', 'daten-start', 'daten-ende');

// messung ist ein PerformanceMeasure (erbt von PerformanceEntry)
console.log(messung.entryType, messung.name, `${messung.duration.toFixed(1)} ms`);

measure daten-laden 142.7 ms

Langsame Ressourcen finden

const langsam = performance
  .getEntriesByType('resource')
  .filter((entry) => entry.duration > 500)
  .map(({ name, duration }) => ({ url: name, ms: Math.round(duration) }));

console.table(langsam);

┌─────────┬──────────────────────────────┬──────┐ │ (index) │ url │ ms │ │ 0 │ https://cdn.example.com/a.js │ 812 │ └─────────┴──────────────────────────────┴──────┘

Einträge live mit PerformanceObserver beobachten

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`[${entry.entryType}] ${entry.name}: ${entry.startTime.toFixed(0)} ms`);
  }
});

// buffered: true liefert auch Einträge, die vor dem Beobachten entstanden sind
observer.observe({ type: 'paint', buffered: true });

[paint] first-paint: 312 ms [paint] first-contentful-paint: 312 ms

Messwerte per toJSON() an den Server senden

addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'hidden') return;
  const daten = performance.getEntriesByType('measure').map((e) => e.toJSON());
  navigator.sendBeacon('/rum', JSON.stringify(daten));
});

// Wichtig · Fallstricke

Kein Konstruktor: new PerformanceEntry() wirft einen TypeError. Einträge entstehen nur durch den Browser bzw. performance.mark()/measure().
Puffergrenzen: Der Ressourcen-Puffer ist standardmäßig begrenzt (meist 250 Einträge). Bei vielen Requests gehen Einträge verloren – mit performance.setResourceTimingBufferSize() anpassen oder auf das Ereignis resourcetimingbufferfull reagieren. Ein PerformanceObserver ist dem Abfragen per getEntries() vorzuziehen.
Nicht alle Typen sind abrufbar: Manche Typen (z. B. longtask, layout-shift, largest-contentful-paint) tauchen nicht in getEntries() auf und lassen sich nur per PerformanceObserver erfassen. Unterstützte Typen prüft man mit PerformanceObserver.supportedEntryTypes; die Unterstützung schwankt zwischen Chromium, Firefox und Safari.
Zeitauflösung: Zum Schutz vor Timing-Angriffen (Spectre) runden Browser startTime/duration ab bzw. fügen Rauschen hinzu; ohne Cross-Origin-Isolation ist die Auflösung gröber.
Cross-Origin-Ressourcen: Detaillierte Zeitwerte fremder Ursprünge sind nur verfügbar, wenn der Server den Header Timing-Allow-Origin sendet; sonst sind viele Felder 0.
Selbst gesetzte Markierungen/Messungen mit performance.clearMarks() und clearMeasures() aufräumen, um Speicherwachstum in langlebigen Single-Page-Apps zu vermeiden.

Siehe auch

Performance PerformanceMark PerformanceMeasure PerformanceTiming PerformanceObserver