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 des Performance-Metrik darstellt, den dieser Eintrag repräsentiert.
Alle unterstützten entryTypes
sind durch 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
-
Meldet die Ladezeit von Elementen.
Die Instanz des Eintrags ist ein
PerformanceElementTiming
-Objekt. event
-
Meldet Latenzen von Ereignissen.
Die Instanz des Eintrags ist ein
PerformanceEventTiming
-Objekt. first-input
-
Meldet die First Input Delay (FID).
Die Instanz des Eintrags ist ein
PerformanceEventTiming
-Objekt. largest-contentful-paint
-
Meldet das größte Rendering eines Elements auf dem Bildschirm.
Die Instanz des Eintrags ist ein
LargestContentfulPaint
-Objekt. layout-shift
-
Meldet die Layout-Stabilität von Webseiten basierend auf den Bewegungen der Elemente auf der Seite.
Die Instanz des Eintrags ist ein
LayoutShift
-Objekt. long-animation-frame
-
Meldet Instanzen von langen Animationsframes (LoAFs).
Die Instanz des Eintrags ist ein
PerformanceLongAnimationFrameTiming
-Objekt. longtask
-
Meldet Instanzen von langen Aufgaben.
Die Instanz des Eintrags ist ein
PerformanceLongTaskTiming
-Objekt. mark
-
Meldet Ihre eigenen benutzerdefinierten Performance-Markierungen.
Die Instanz des Eintrags ist ein
PerformanceMark
-Objekt. measure
-
Meldet Ihre eigenen benutzerdefinierten Performance-Maßnahmen.
Die Instanz des Eintrags ist ein
PerformanceMeasure
-Objekt. -
Meldet das Timing der Dokumentennavigation.
Die Instanz des Eintrags ist ein
PerformanceNavigationTiming
-Objekt. paint
-
Meldet wichtige Momente der Dokumenten-Rendering während des Seitenladevorgangs (erste Zeichnung, erste inhaltsreiche Zeichnung).
Die Instanz des Eintrags ist ein
PerformancePaintTiming
-Objekt. resource
-
Meldet Timing-Informationen für Ressourcen in einem Dokument.
Die Instanz des Eintrags ist ein
PerformanceResourceTiming
-Objekt. taskattribution
-
Meldet die Art der Arbeit, die maßgeblich zu der langen Aufgabe beigetragen hat.
Die Instanz des Eintrags ist ein
TaskAttributionTiming
-Objekt. visibility-state
-
Meldet das Timing von Änderungen des Sichtbarkeitsstatus der Seite, d.h. wenn ein Tab von Vordergrund zu Hintergrund wechselt oder umgekehrt.
Die Instanz des Eintrags ist ein
VisibilityStateEntry
-Objekt.
Beispiele
Filtern von Performance-Einträgen nach Typ
Die entryType
-Eigenschaft kann nützlich sein, wenn spezifische Performance-Einträge herausgefiltert werden sollen. Zum Beispiel möchten Sie vielleicht alle Skript-Ressourcen überprüfen, daher würden 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);
Abrufen von Performance-Einträgen nach Typ
Sowohl Performance
als auch PerformanceObserver
bieten Methoden, die es ermöglichen, Performance-Einträge direkt nach Typ abzurufen. Sie benötigen nicht unbedingt die entryType
-Eigenschaft dafür, stattdessen können Sie Performance.getEntriesByType()
oder PerformanceObserverEntryList.getEntriesByType()
verwenden.
Außerdem, wenn Sie mit einem PerformanceObserver
beobachten, nimmt die observe()
-Methode ein Array von entryTypes
in ihrem Optionsobjekt an, bei dem Sie entscheiden können, welche Typen von Einträgen 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
Specification |
---|
Performance Timeline # dom-performanceentry-entrytype |
Browser-Kompatibilität
BCD tables only load in the browser