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