PerformanceEntry.entryType — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceEntry.entryType

Beschreibung

Die Eigenschaft entryType ist schreibgeschützt und gibt an, zu welcher Kategorie ein Eintrag der Performance Timeline gehört. Jede Unterklasse von PerformanceEntry hat einen festen Typ. PerformanceMark liefert zum Beispiel "mark", PerformanceResourceTiming liefert "resource".

Gängige Werte sind:

"mark" – eigene Zeitmarken über performance.mark()
"measure" – Messungen über performance.measure()
"navigation" – Ladevorgang des Dokuments (PerformanceNavigationTiming)
"resource" – geladene Ressourcen wie Skripte, Bilder oder Fetch-Anfragen
"paint" – first-paint und first-contentful-paint
"largest-contentful-paint", "layout-shift", "first-input", "event" – Core-Web-Vitals-Daten
"longtask", "long-animation-frame", "element", "visibility-state", "taskattribution"

In der Praxis verwendet man entryType vor allem, um Einträge zu filtern und je nach Typ unterschiedlich zu verarbeiten. Das ist besonders nützlich, wenn ein PerformanceObserver mehrere Typen gleichzeitig beobachtet. Dieselben Strings übergibt man auch an performance.getEntriesByType() und an die Option entryTypes bzw. type von PerformanceObserver.observe().

Rückgabewert

Typ

string

Beschreibung

Der Typ des Eintrags, z. B. "mark", "measure", "resource", "navigation" oder "paint". Der Wert hängt von der konkreten Unterklasse ab und ändert sich nicht.

Beispiele

Typ einer eigenen Zeitmarke auslesen

performance.mark('app-start');
const [entry] = performance.getEntriesByName('app-start');
console.log(entry.entryType);
console.log(entry instanceof PerformanceMark);

mark true

Mehrere Typen im PerformanceObserver unterscheiden

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    switch (entry.entryType) {
      case 'largest-contentful-paint':
        console.log(`LCP: ${entry.startTime.toFixed(0)} ms`);
        break;
      case 'layout-shift':
        if (!entry.hadRecentInput) console.log(`CLS-Beitrag: ${entry.value}`);
        break;
      case 'longtask':
        console.log(`Long Task: ${entry.duration.toFixed(0)} ms`);
        break;
    }
  }
});

// Nur die Typen beobachten, die der Browser unterstützt
const gewuenscht = ['largest-contentful-paint', 'layout-shift', 'longtask'];
const unterstuetzt = gewuenscht.filter((t) =>
  PerformanceObserver.supportedEntryTypes.includes(t)
);
observer.observe({ entryTypes: unterstuetzt });

LCP: 1234 ms Long Task: 87 ms

Alle Einträge der Timeline nach Typ zählen

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

{ navigation: 1, resource: 24, paint: 2, mark: 1 }

Node.js: Messung mit perf_hooks

import { performance } from 'node:perf_hooks';

performance.mark('a');
await new Promise((r) => setTimeout(r, 50));
performance.mark('b');
const m = performance.measure('warten', 'a', 'b');
console.log(m.entryType, Math.round(m.duration));

measure 50

// Wichtig · Fallstricke

Schreibgeschützt: Wenn man entryType einen Wert zuweist, wird die Zuweisung ignoriert. Im Strict Mode löst sie einen TypeError aus.
Nicht jeder Typ steht in getEntries(): Manche Typen erscheinen nur über einen PerformanceObserver, darunter "largest-contentful-paint", "layout-shift", "longtask", "event" und "element". performance.getEntriesByType('longtask') liefert dann ein leeres Array. Damit auch frühere Einträge ankommen, verwendet man observe({ type, buffered: true }).
Unterstützung prüfen: Welche Typen der Browser kennt, steht in PerformanceObserver.supportedEntryTypes. Viele Typen gibt es nur in Chromium-Browsern, zum Beispiel "layout-shift", "longtask" und "long-animation-frame". Firefox und Safari unterstützen sie nur teilweise oder gar nicht.
entryTypes und type nicht mischen: observe() akzeptiert entweder entryTypes (Array) oder type (String). Die Option buffered funktioniert nur zusammen mit type.
Bei Einträgen vom Typ "resource" aus anderen Origins sind viele Zeitwerte gleich 0, wenn der Server keinen Timing-Allow-Origin-Header sendet. entryType selbst ist davon nicht betroffen.

Siehe auch

Performance.mark() PerformanceEntry.name PerformanceEntry.startTime PerformanceEntry.duration PerformanceEntry.navigationId