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 den Typ der Leistungsmessung angibt, für die dieser Eintrag steht.
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. Manche Subtypen haben mehr als einen entryType.
container-
Gibt die Rendering-Zeit von Elementgruppen innerhalb eines Containers an.
Der Eintrag ist ein
PerformanceContainerTiming-Objekt. element-
Gibt die Ladezeit von Elementen an.
Der Eintrag ist ein
PerformanceElementTiming-Objekt. event-
Gibt Ereignislatenzen an.
Der Eintrag ist ein
PerformanceEventTiming-Objekt. first-input-
Gibt den First Input Delay (FID) an.
Der Eintrag ist ein
PerformanceEventTiming-Objekt. interaction-contentful-paint-
Gibt den größten Paint an, den ein Element nach einer Interaktion auf dem Bildschirm ausgelöst hat.
Der Eintrag ist ein
InteractionContentfulPaint-Objekt. largest-contentful-paint-
Gibt den größten Paint an, den ein Element auf dem Bildschirm ausgelöst hat.
Der Eintrag ist ein
LargestContentfulPaint-Objekt. layout-shift-
Gibt die Layoutstabilität von Webseiten anhand der Bewegungen der Elemente auf der Seite an.
Der Eintrag ist ein
LayoutShift-Objekt. long-animation-frame-
Gibt Vorkommen von langen Animationsframes (LoAFs) an.
Der Eintrag ist ein
PerformanceLongAnimationFrameTiming-Objekt. longtask-
Gibt Vorkommen lang andauernder Aufgaben an.
Der Eintrag ist ein
PerformanceLongTaskTiming-Objekt. mark-
Gibt Ihre benutzerdefinierten Leistungsmarkierungen an.
Der Eintrag ist ein
PerformanceMark-Objekt. measure-
Gibt Ihre benutzerdefinierten Leistungsmessungen an.
Der Eintrag ist ein
PerformanceMeasure-Objekt. -
Gibt Zeitmessdaten für die Dokumentnavigation an.
Der Eintrag ist ein
PerformanceNavigationTiming-Objekt. paint-
Gibt wichtige Zeitpunkte beim Rendern des Dokuments während des Seitenladens an (First Paint, First Contentful Paint).
Der Eintrag ist ein
PerformancePaintTiming-Objekt. resource-
Gibt Zeitmessdaten für Ressourcen in einem Dokument an.
Der Eintrag ist ein
PerformanceResourceTiming-Objekt. -
Gibt Paints an, 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-
Gibt an, welche Art von Arbeit wesentlich zu einer lang andauernden Aufgabe beigetragen hat.
Der Eintrag ist ein
TaskAttributionTiming-Objekt. visibility-state-
Gibt die Zeitpunkte an, zu denen sich der Sichtbarkeitsstatus der Seite ändert, 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 hilfreich sein, wenn Sie bestimmte Leistungseinträge herausfiltern möchten. Wenn Sie beispielsweise alle Skriptressourcen prüfen möchten, suchen Sie nach Einträgen mit einem entryType von "resource" und einem initiatorType von "script".
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 bieten Methoden, 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, können Sie außerdem der Methode observe() über ihr Optionsobjekt ein Array von entryTypes übergeben und so 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 |