PerformanceEntry: Eigenschaft entryType
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2017 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die schreibgeschützte Eigenschaft entryType gibt einen String zurück, der angibt, welchen Typ von Leistungsmetrik 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 Untertyp des PerformanceEntry-Objekts ab. Einige Untertypen haben mehr als einen entryType.
container-
Meldet die Renderzeit von Elementgruppen innerhalb eines Containers.
Der Eintrag ist ein
PerformanceContainerTiming-Objekt. element-
Meldet die Ladezeit von Elementen.
Der Eintrag ist ein
PerformanceElementTiming-Objekt. event-
Meldet Ereignislatenzen.
Der Eintrag ist ein
PerformanceEventTiming-Objekt. first-input-
Meldet den First Input Delay (FID).
Der Eintrag ist ein
PerformanceEventTiming-Objekt. interaction-contentful-paint-
Meldet den größten Paint, den ein Element nach einer Interaktion auf dem Bildschirm ausgelöst hat.
Der Eintrag ist ein
InteractionContentfulPaint-Objekt. largest-contentful-paint-
Meldet den größten Paint, den ein Element auf dem Bildschirm ausgelöst hat.
Der Eintrag ist ein
LargestContentfulPaint-Objekt. layout-shift-
Meldet die Layout-Stabilität von Webseiten anhand der Bewegungen der Elemente auf der Seite.
Der Eintrag ist ein
LayoutShift-Objekt. long-animation-frame-
Meldet Instanzen von langen Animationsframes (LoAFs).
Der Eintrag ist ein
PerformanceLongAnimationFrameTiming-Objekt. longtask-
Meldet Instanzen lang andauernder Aufgaben.
Der Eintrag ist ein
PerformanceLongTaskTiming-Objekt. mark-
Meldet selbst definierte Leistungsmarkierungen.
Der Eintrag ist ein
PerformanceMark-Objekt. measure-
Meldet selbst definierte Leistungsmessungen.
Der Eintrag ist ein
PerformanceMeasure-Objekt. -
Meldet Zeitinformationen zur Dokumentnavigation.
Der Eintrag ist ein
PerformanceNavigationTiming-Objekt. paint-
Meldet wichtige Zeitpunkte beim Rendern des Dokuments (First Paint, First Contentful Paint) während des Ladens der Seite.
Der Eintrag ist ein
PerformancePaintTiming-Objekt. resource-
Meldet Zeitinformationen zu Ressourcen in einem Dokument.
Der Eintrag ist ein
PerformanceResourceTiming-Objekt. -
Meldet Paints, die auf dem Bildschirm ausgelöst werden, nachdem eine Benutzerinteraktion und eine URL-Aktualisierung eine Soft Navigation ausgelöst haben.
Der Eintrag ist ein
PerformanceSoftNavigation-Objekt. taskattribution-
Meldet die Art der Arbeit, die wesentlich zur lang andauernden Aufgabe beigetragen hat.
Der Eintrag ist ein
TaskAttributionTiming-Objekt. visibility-state-
Meldet den Zeitpunkt von Änderungen des Sichtbarkeitszustands einer Seite, also wann ein Tab vom Vordergrund in den Hintergrund wechselt oder umgekehrt.
Der Eintrag ist ein
VisibilityStateEntry-Objekt.
Beispiele
Leistungseinträge nach Typ filtern
Die Eigenschaft entryType kann nützlich sein, um bestimmte Leistungseinträge herauszufiltern. Wenn Sie beispielsweise alle Skriptressourcen prüfen möchten, können Sie nach einem entryType von "resource" und einem initiatorType von "script" suchen.
const scriptResources = performance
.getEntries()
.filter(
(entry) =>
entry.entryType === "resource" && entry.initiatorType === "script",
);
console.log(scriptResources);
Leistungseinträge nach Typ abrufen
Sowohl Performance als auch PerformanceObserver stellen Methoden bereit, mit denen Sie Leistungseinträge direkt nach Typ abrufen können. Dafür benötigen Sie die Eigenschaft entryType nicht unbedingt. Stattdessen können Sie Performance.getEntriesByType() oder PerformanceObserverEntryList.getEntriesByType() verwenden.
Wenn Sie Einträge mit einem PerformanceObserver beobachten, akzeptiert die Methode observe() außerdem ein Array von entryTypes in ihrem Optionsobjekt. Damit können Sie festlegen, welche Eintragstypen beobachtet werden sollen.
// 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
| Spezifikation |
|---|
| Performance Timeline # dom-performanceentry-entrytype |