PerformanceObserverEntryList.getEntries() — Methode · JavaScript-Referenz

Signatur

PerformanceObserverEntryList.prototype.getEntries()

Beschreibung

getEntries() wird auf der PerformanceObserverEntryList aufgerufen, die der Callback eines PerformanceObserver als erstes Argument erhält. Die Methode liefert alle Einträge (PerformanceEntry-Objekte bzw. Unterklassen wie PerformanceResourceTiming, PerformanceMark oder LargestContentfulPaint), die seit dem letzten Callback-Aufruf für die beobachteten Eintragstypen angefallen sind.

Anders als performance.getEntries() greift diese Methode nicht auf den globalen Performance-Puffer zu, sondern nur auf die explizit beobachteten Einträge des aktuellen Stapels. Damit eignet sie sich ideal für Echtzeit-Messungen, etwa zum Sammeln von Core Web Vitals, zum Protokollieren langsamer Netzwerkanfragen oder zum Auswerten eigener performance.mark()/measure()-Aufrufe.

Das zurückgegebene Array ist nach startTime aufsteigend sortiert. Wird ein Observer für mehrere Typen registriert (entryTypes: [...]), enthält das Array gemischte Eintragstypen – bei Bedarf filtert man mit getEntriesByType() oder getEntriesByName().

Rückgabewert

Typ

PerformanceEntry[]

Beschreibung

Ein Array von PerformanceEntry-Objekten (bzw. deren Unterklassen), chronologisch nach startTime sortiert. Leeres Array, wenn keine Einträge vorliegen.

Beispiele

Langsame Ressourcen-Ladevorgänge protokollieren

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 500) {
      console.warn(`Langsam: ${entry.name} (${Math.round(entry.duration)} ms)`);
    }
  }
});

// buffered: true liefert auch bereits vor der Registrierung angefallene Einträge
observer.observe({ type: 'resource', buffered: true });

Langsam: https://example.com/bilder/hero.jpg (812 ms)

Eigene Marks und Measures auswerten

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.entryType}: ${entry.name} @ ${entry.startTime.toFixed(1)} ms, Dauer ${entry.duration.toFixed(1)} ms`);
  });
});
observer.observe({ entryTypes: ['mark', 'measure'] });

performance.mark('daten-start');
const daten = Array.from({ length: 1e5 }, (_, i) => i * 2);
performance.mark('daten-ende');
performance.measure('daten-aufbau', 'daten-start', 'daten-ende');

mark: daten-start @ 120.4 ms, Dauer 0.0 ms mark: daten-ende @ 124.9 ms, Dauer 0.0 ms measure: daten-aufbau @ 120.4 ms, Dauer 4.5 ms

Largest Contentful Paint (LCP) ermitteln

const lcpObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  // Der letzte Eintrag ist der aktuelle LCP-Kandidat
  const lcp = entries.at(-1);
  console.log('LCP:', Math.round(lcp.startTime), 'ms', lcp.element);
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

LCP: 1340 ms <img class="hero">

// Wichtig · Fallstricke

Nur der aktuelle Stapel: getEntries() liefert ausschließlich die Einträge dieses Callback-Aufrufs, nicht alle bisherigen. Wer eine Historie braucht, muss sie selbst sammeln oder performance.getEntries() verwenden.
buffered: true funktioniert nur zusammen mit type (einzelner Typ), nicht mit entryTypes. Ohne diese Option fehlen Einträge, die vor dem observe()-Aufruf entstanden sind.
Die Callbacks werden asynchron und gebündelt aufgerufen (in Leerlaufzeiten); Einträge erscheinen daher nicht sofort nach dem Ereignis. Vor dem Entladen der Seite ggf. observer.takeRecords() aufrufen, um ausstehende Einträge nicht zu verlieren.
Welche Eintragstypen unterstützt werden, variiert je nach Browser (z. B. ist largest-contentful-paint oder layout-shift in Safari/Firefox teils nicht verfügbar). Prüfen mit PerformanceObserver.supportedEntryTypes.
Bei Cross-Origin-Ressourcen sind Detailwerte (z. B. transferSize) ohne Timing-Allow-Origin-Header auf 0 gesetzt.

Siehe auch

PerformanceObserverEntryList.getEntriesByName() PerformanceObserverEntryList.getEntriesByType() PerformanceObserver.takeRecords() PerformanceObserver.disconnect() PerformanceObserver.observe()