Performance.getEntriesByType() — Methode · JavaScript-Referenz

Signatur

Performance.prototype.getEntriesByType(type)

Beschreibung

Die Methode getEntriesByType() liest einen Schnappschuss der Performance-Timeline aus und filtert ihn nach dem Eintragstyp (entryType). Das Ergebnis ist ein gewöhnliches Array, chronologisch nach startTime sortiert. So kommt man gezielt an Ladezeiten von Ressourcen, Navigations-Kennzahlen oder eigene Markierungen und Messungen.

Häufig verwendete Typen sind:

"navigation" – ein PerformanceNavigationTiming-Eintrag für das aktuelle Dokument (DNS, TCP, TTFB, DOMContentLoaded, load …)
"resource" – PerformanceResourceTiming-Einträge für geladene Skripte, Bilder, CSS, fetch-Aufrufe usw.
"mark" und "measure" – eigene Einträge aus performance.mark() und performance.measure()
"paint" – first-paint und first-contentful-paint

Die Methode eignet sich für einmalige Auswertungen, etwa nach dem load-Event oder beim Debuggen. Wer laufend auf neue Einträge reagieren will, sollte stattdessen einen PerformanceObserver verwenden. Manche Typen (z. B. "largest-contentful-paint", "layout-shift", "longtask", "event") stehen nur über einen Observer zur Verfügung und werden von getEntriesByType() nicht geliefert.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der gesuchte Eintragstyp, z. B. `"navigation"`, `"resource"`, `"mark"`, `"measure"` oder `"paint"`. Groß-/Kleinschreibung wird beachtet. Die unterstützten Typen lassen sich über `PerformanceObserver.supportedEntryTypes` abfragen.

Rückgabewert

Typ

PerformanceEntry[]

Beschreibung

Ein neues Array mit allen passenden Einträgen, sortiert nach startTime. Gibt es keine Treffer oder ist der Typ unbekannt, wird ein leeres Array zurückgegeben – es wird kein Fehler geworfen.

Beispiele

Langsamste Ressourcen der Seite finden

window.addEventListener('load', () => {
  const resources = performance.getEntriesByType('resource');

  const slowest = resources
    .map(({ name, initiatorType, duration, transferSize }) => ({
      datei: name.split('/').pop(),
      typ: initiatorType,
      dauerMs: Math.round(duration),
      kb: +(transferSize / 1024).toFixed(1)
    }))
    .sort((a, b) => b.dauerMs - a.dauerMs)
    .slice(0, 5);

  console.table(slowest);
});

Tabelle mit den 5 langsamsten Ressourcen, z. B. { datei: 'hero.jpg', typ: 'img', dauerMs: 412, kb: 238.4 }

Navigations-Kennzahlen (TTFB, DOM, Load) auslesen

window.addEventListener('load', () => {
  // setTimeout, damit loadEventEnd bereits gesetzt ist
  setTimeout(() => {
    const [nav] = performance.getEntriesByType('navigation');
    if (!nav) return;

    console.log({
      ttfb: Math.round(nav.responseStart - nav.requestStart),
      domReady: Math.round(nav.domContentLoadedEventEnd),
      load: Math.round(nav.loadEventEnd),
      typ: nav.type // 'navigate', 'reload', 'back_forward'
    });
  }, 0);
});

{ ttfb: 87, domReady: 640, load: 1210, typ: 'navigate' }

Eigene Messungen mit mark/measure auswerten

const renderList = (n) => {
  performance.mark('render-start');
  const ul = document.createElement('ul');
  for (let i = 0; i < n; i++) {
    const li = document.createElement('li');
    li.textContent = `Eintrag ${i}`;
    ul.append(li);
  }
  document.body.append(ul);
  performance.mark('render-end');
  performance.measure('render-list', 'render-start', 'render-end');
};

renderList(5000);

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

// Aufräumen, damit sich keine Einträge ansammeln
performance.clearMarks();
performance.clearMeasures();

render-list: 23.4 ms

First Contentful Paint ermitteln

const fcp = performance
  .getEntriesByType('paint')
  .find((e) => e.name === 'first-contentful-paint');

console.log(fcp ? `FCP: ${Math.round(fcp.startTime)} ms` : 'FCP noch nicht verfügbar');

FCP: 512 ms

// Wichtig · Fallstricke

Nur ein Schnappschuss: Das Array wird nicht aktualisiert. Einträge, die später entstehen (z. B. nachgeladene Bilder), sind nur bei einem erneuten Aufruf oder über einen PerformanceObserver sichtbar.
Resource-Timing-Puffer: Standardmäßig werden nur rund 250 "resource"-Einträge gespeichert. Danach werden neue verworfen und das Event resourcetimingbufferfull ausgelöst. Abhilfe schaffen performance.setResourceTimingBufferSize() oder performance.clearResourceTimings().
Observer-exklusive Typen: "largest-contentful-paint", "layout-shift", "longtask", "event" und "first-input" liefern hier immer ein leeres Array. Sie sind nur mit PerformanceObserver (Option buffered: true) erreichbar.
Cross-Origin-Ressourcen: Bei Ressourcen fremder Herkunft sind Detailwerte wie transferSize, domainLookupStart oder responseStart gleich 0, solange der Server keinen Timing-Allow-Origin-Header mitschickt.
Genauigkeit: Aus Sicherheitsgründen (Spectre) runden Browser die Zeitstempel; ohne Cross-Origin-Isolation ist die Auflösung gröber.
Kompatibilität: In allen modernen Browsern verfügbar. In Node.js gibt es die Methode über perf_hooks.performance bzw. das globale performance, dort aber nur mit einem Teil der Typen (mark, measure, function, gc …).

Siehe auch

Performance.getEntries() Performance.getEntriesByName() Performance.mark() Performance.measure() PerformanceObserver PerformanceEntry PerformanceResourceTiming PerformanceNavigationTiming