PerformanceObserver.supportedEntryTypes — Eigenschaft · JavaScript-Referenz

Signatur

static get PerformanceObserver.supportedEntryTypes

Beschreibung

PerformanceObserver.supportedEntryTypes ist eine statische Eigenschaft. Man liest sie direkt an der Klasse PerformanceObserver ab, nicht an einer Instanz. Sie liefert ein eingefrorenes Array mit allen Eintragstypen, die der aktuelle Browser beobachten kann, zum Beispiel "navigation", "resource", "paint", "largest-contentful-paint", "layout-shift", "longtask", "event" oder "mark"/"measure". Die Einträge sind alphabetisch sortiert.

Die Eigenschaft dient vor allem der Feature-Erkennung. Bevor Sie observe() mit einem bestimmten type aufrufen, prüfen Sie, ob der Typ überhaupt unterstützt wird. Wird ein nicht unterstützter Typ übergeben, ignoriert der Browser ihn stillschweigend und gibt höchstens eine Warnung in der Konsole aus. Ohne vorherige Prüfung bleibt so unbemerkt, dass keine Daten erfasst werden.

In Werkzeugen zur Leistungsmessung (RUM) wie Web-Vitals-Bibliotheken ist supportedEntryTypes üblich, um Messungen wie LCP, CLS oder INP nur dort zu starten, wo der Browser sie liefert. Auf allen anderen Browsern wird dann sauber auf einen Ersatzweg umgeschaltet oder die Messung übersprungen.

Rückgabewert

Typ

ReadonlyArray<string>

Beschreibung

Ein eingefrorenes (Object.isFrozen() === true), alphabetisch sortiertes Array mit den unterstützten entryType-Namen.

Beispiele

Alle unterstützten Eintragstypen auflisten

if ('PerformanceObserver' in window) {
  console.log(PerformanceObserver.supportedEntryTypes);
}

["element", "event", "first-input", "largest-contentful-paint", "layout-shift", "long-animation-frame", "longtask", "mark", "measure", "navigation", "paint", "resource", "visibility-state"] // Beispiel Chrome, variiert je Browser

LCP nur beobachten, wenn unterstützt

const observeIfSupported = (type, callback) => {
  if (!PerformanceObserver.supportedEntryTypes?.includes(type)) {
    console.info(`Eintragstyp "${type}" wird nicht unterstützt.`);
    return null;
  }
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(callback);
  });
  observer.observe({ type, buffered: true });
  return observer;
};

observeIfSupported('largest-contentful-paint', (entry) => {
  console.log('LCP:', Math.round(entry.startTime), 'ms', entry.element);
});

LCP: 1234 ms <img …>

Mehrere Metriken gezielt aktivieren

const wanted = ['layout-shift', 'longtask', 'event', 'soft-navigation'];
const supported = new Set(PerformanceObserver.supportedEntryTypes ?? []);

const active = wanted.filter((t) => supported.has(t));
const missing = wanted.filter((t) => !supported.has(t));

console.log('Aktiv:', active);
console.log('Nicht verfügbar:', missing);

const po = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.entryType, entry.name, entry.duration);
  }
});
active.forEach((type) => po.observe({ type, buffered: true }));

Aktiv: ["layout-shift", "longtask", "event"] Nicht verfügbar: ["soft-navigation"]

// Wichtig · Fallstricke

Statisch: new PerformanceObserver(cb).supportedEntryTypes ergibt undefined. Lesen Sie die Eigenschaft immer an der Klasse ab.
Ältere Browser: In Browsern, die zwar PerformanceObserver kennen, aber noch nicht supportedEntryTypes (zum Beispiel Chrome vor 73, Safari vor 13), ist der Wert undefined. Absichern lässt sich das mit optionaler Verkettung: PerformanceObserver.supportedEntryTypes?.includes(…).
Eingefroren: Das Array lässt sich nicht verändern. push() wirft im Strict Mode einen TypeError.
Kein Datenbestand: Die Liste zeigt nur, welche Typen der Browser unterstützt. Ob tatsächlich Einträge anfallen, sagt sie nicht aus, denn "largest-contentful-paint" gibt es zum Beispiel nicht in Hintergrund-Tabs.
Der Inhalt unterscheidet sich stark zwischen den Browsern. Firefox und Safari unterstützen etwa "longtask", "layout-shift" und "long-animation-frame" nur teilweise oder gar nicht.
Auch in Web Workern verfügbar, dort allerdings meist mit weniger Typen (zum Beispiel ohne "paint").

Siehe auch

PerformanceResourceTiming.redirectEnd PerformanceResourceTiming.responseStatus PerformanceEntry.entryType PerformanceResourceTiming.contentType PerformanceResourceTiming.deliveryType