Performance.getEntries() — Methode · JavaScript-Referenz

Signatur

Performance.prototype.getEntries()

Beschreibung

performance.getEntries() liefert eine Momentaufnahme aller Einträge, die zum Zeitpunkt des Aufrufs in der Leistungschronologie gespeichert sind. Dazu gehören Einträge verschiedener Typen: navigation (Seitenaufruf), resource (geladene Skripte, Bilder, Fetch-Anfragen usw.), mark und measure (eigene Messpunkte über performance.mark() und performance.measure()) sowie paint (First Paint, First Contentful Paint).

Die Einträge sind aufsteigend nach startTime sortiert. Jeder Eintrag hat mindestens die Eigenschaften name, entryType, startTime und duration. Je nach Typ ist das Objekt eine spezialisierte Unterklasse, zum Beispiel PerformanceResourceTiming oder PerformanceNavigationTiming, mit zusätzlichen Feldern wie transferSize oder domContentLoadedEventEnd.

Die Methode passt gut für einmalige Auswertungen, etwa beim Debugging in der Konsole oder in einem Analyse-Skript nach dem load-Event. Wenn du nur einen bestimmten Typ oder Namen brauchst, sind getEntriesByType() und getEntriesByName() kürzer und effizienter. Um laufend neue Einträge zu verfolgen, ist ein PerformanceObserver die bessere Wahl, denn er meldet neue Einträge von selbst, ohne dass du wiederholt abfragen musst.

Rückgabewert

Typ

PerformanceEntry[]

Beschreibung

Ein neues Array mit allen aktuell gespeicherten PerformanceEntry-Objekten, aufsteigend nach startTime sortiert. Gibt es keine Einträge, ist das Array leer. Das Array ist eine Kopie: Spätere Einträge erscheinen darin nicht.

Beispiele

Alle Einträge nach dem Laden der Seite ausgeben

window.addEventListener('load', () => {
  const entries = performance.getEntries();

  for (const entry of entries) {
    console.log(
      `${entry.entryType.padEnd(10)} ${entry.name} – Start: ${entry.startTime.toFixed(1)} ms, Dauer: ${entry.duration.toFixed(1)} ms`
    );
  }
});

navigation https://example.com/ – Start: 0.0 ms, Dauer: 812.4 ms resource https://example.com/app.js – Start: 45.2 ms, Dauer: 120.7 ms paint first-contentful-paint – Start: 310.5 ms, Dauer: 0.0 ms ...

Einträge nach Typ gruppieren und zählen

const countByType = performance.getEntries().reduce((acc, entry) => {
  acc[entry.entryType] = (acc[entry.entryType] ?? 0) + 1;
  return acc;
}, {});

console.table(countByType);

{ navigation: 1, resource: 23, paint: 2, mark: 2, measure: 1 }

Eigene Messung anlegen und auswerten

const loadData = async () => {
  performance.mark('daten-start');
  const res = await fetch('/api/produkte');
  await res.json();
  performance.mark('daten-ende');
  performance.measure('daten-laden', 'daten-start', 'daten-ende');

  // Nur die eigenen Messungen aus allen Einträgen herausfiltern
  const measures = performance
    .getEntries()
    .filter((e) => e.entryType === 'measure');

  measures.forEach((m) => console.log(`${m.name}: ${m.duration.toFixed(1)} ms`));
};

loadData();

daten-laden: 184.3 ms

Langsamste Ressourcen finden

const slowest = performance
  .getEntries()
  .filter((e) => e.entryType === 'resource')
  .sort((a, b) => b.duration - a.duration)
  .slice(0, 3)
  .map(({ name, duration, transferSize }) => ({
    name,
    dauerMs: Math.round(duration),
    kb: Math.round(transferSize / 1024)
  }));

console.table(slowest);

[{ name: 'https://cdn.example.com/hero.jpg', dauerMs: 640, kb: 412 }, ...]

// Wichtig · Fallstricke

Nicht alle Typen sind enthalten: Einträge vom Typ largest-contentful-paint, layout-shift, longtask, event, first-input und element landen nicht in der Chronologie, die getEntries() ausliest. Du bekommst sie nur über einen PerformanceObserver, am besten mit { type: '...', buffered: true }.
Puffergrenze für Ressourcen: Der Puffer für Resource-Timing-Einträge fasst standardmäßig nur 250 Einträge. Weitere werden verworfen, und es wird das Event resourcetimingbufferfull ausgelöst. Mit performance.setResourceTimingBufferSize() vergrößerst du den Puffer, mit performance.clearResourceTimings() leerst du ihn.
Momentaufnahme: Das zurückgegebene Array wird nicht aktualisiert. Rufst du die Methode zu früh auf, zum Beispiel vor load, fehlen spätere Einträge.
Cross-Origin-Ressourcen: Bei Ressourcen von fremden Origins ohne Timing-Allow-Origin-Header sind viele Detailfelder wie transferSize oder domainLookupStart auf 0 gesetzt.
Genauigkeit: Browser runden die Zeitstempel aus Sicherheitsgründen (Schutz vor Spectre). Ohne Cross-Origin-Isolation ist die Auflösung gröber.
Alte Filter-Variante: In einem frühen Entwurf der Spezifikation gab es einen Filter-Parameter. Er wurde nie breit unterstützt. Verwende stattdessen getEntriesByType() bzw. getEntriesByName().
Node.js: Dort ist die Methode über performance aus node:perf_hooks bzw. global verfügbar (seit v16). Sie enthält vor allem mark- und measure-Einträge.

Siehe auch

Performance.getEntriesByType() Performance.getEntriesByName() Performance.mark() Performance.measure() Performance.clearResourceTimings() PerformanceEntry PerformanceObserver PerformanceResourceTiming