PerformanceEntry: entryType-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die schreibgeschützte entryType-Eigenschaft gibt einen String zurück, der den Typ der Leistungsmetrik darstellt, den dieser Eintrag repräsentiert.

Alle unterstützten entryTypes sind über die statische Eigenschaft PerformanceObserver.supportedEntryTypes verfügbar.

Wert

Ein String. Der Rückgabewert hängt vom Subtyp des PerformanceEntry-Objekts ab. Einige Subtypen haben mehr als einen entryType.

element

Berichtet über die Ladezeit von Elementen.

Die Eintragsinstanz wird ein PerformanceElementTiming-Objekt sein.

event

Berichtet über die Verzögerungen von Ereignissen.

Die Eintragsinstanz wird ein PerformanceEventTiming-Objekt sein.

first-input

Berichtet über die erste Eingabeverzögerung (FID).

Die Eintragsinstanz wird ein PerformanceEventTiming-Objekt sein.

largest-contentful-paint

Berichtet über das größte Rendern eines Elements auf dem Bildschirm.

Die Eintragsinstanz wird ein LargestContentfulPaint-Objekt sein.

layout-shift

Berichtet über die Layout-Stabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.

Die Eintragsinstanz wird ein LayoutShift-Objekt sein.

long-animation-frame

Berichtet über Instanzen von langen Animationsrahmen (LoAFs).

Die Eintragsinstanz wird ein PerformanceLongAnimationFrameTiming-Objekt sein.

longtask

Berichtet über Instanzen von langen Aufgaben.

Die Eintragsinstanz wird ein PerformanceLongTaskTiming-Objekt sein.

mark

Berichtet über Ihre eigenen benutzerdefinierten Leistungsmarkierungen.

Die Eintragsinstanz wird ein PerformanceMark-Objekt sein.

measure

Berichtet über Ihre eigenen benutzerdefinierten Leistungsmaße.

Die Eintragsinstanz wird ein PerformanceMeasure-Objekt sein.

Berichtet über das Timing der Dokumenten-Navigation.

Die Eintragsinstanz wird ein PerformanceNavigationTiming-Objekt sein.

paint

Berichtet über wichtige Momente des Dokumenten-Renderings (erste Darstellung, erster inhaltsvoller Anstrich) während des Ladens der Seite.

Die Eintragsinstanz wird ein PerformancePaintTiming-Objekt sein.

resource

Berichtet über Zeitinformationen für Ressourcen in einem Dokument.

Die Eintragsinstanz wird ein PerformanceResourceTiming-Objekt sein.

taskattribution

Berichtet über die Art der Arbeit, die wesentlich zur langen Aufgabe beigetragen hat.

Die Eintragsinstanz wird ein TaskAttributionTiming-Objekt sein.

visibility-state

Berichtet über das Timing von Sichtbarkeitszustandswechseln der Seite, d. h. wenn ein Tab vom Vordergrund in den Hintergrund oder umgekehrt wechselt.

Die Eintragsinstanz wird ein VisibilityStateEntry-Objekt sein.

Beispiele

Filtern von Leistungseinträgen nach Typ

Die entryType-Eigenschaft kann nützlich sein, wenn spezifische Leistungseinträge herausgefiltert werden sollen. Beispielsweise könnten Sie alle Skript-Ressourcen überprüfen wollen, indem Sie nach einem entryType von "resource" und einem initiatorType von "script" suchen.

js
const scriptResources = performance
  .getEntries()
  .filter(
    (entry) =>
      entry.entryType === "resource" && entry.initiatorType === "script",
  );
console.log(scriptResources);

Abrufen von Leistungseinträgen nach Typ

Sowohl Performance als auch PerformanceObserver bieten Methoden, die es Ihnen erlauben, Leistungseinträge direkt nach Typ abzurufen. Sie benötigen dafür nicht unbedingt die entryType-Eigenschaft, sondern können stattdessen Performance.getEntriesByType() oder PerformanceObserverEntryList.getEntriesByType() verwenden.

Auch wenn Sie mit einem PerformanceObserver beobachten, nimmt die observe()-Methode ein Array von entryTypes in ihrem Optionsobjekt, mit dem Sie entscheiden können, welche Eintragstypen beobachtet werden sollen.

js
// Log all resource entries at this point
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(`${entry.name}'s duration: ${entry.duration}`);
});

// PerformanceObserver version
// Log all resource entries when they are available
function perfObserver(list, observer) {
  list.getEntriesByType("resource").forEach((entry) => {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["resource", "navigation"] });

Spezifikationen

Specification
Performance Timeline
# dom-performanceentry-entrytype

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch