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 2017.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die schreibgeschützte entryType-Eigenschaft gibt einen Zeichenfolgenwert 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
Eine Zeichenfolge. Der Rückgabewert hängt vom Subtyp des PerformanceEntry-Objekts ab. Einige Subtypen haben mehr als einen entryType.
element-
Berichtet die Ladezeit von Elementen.
Die Eintragsinstanz wird ein
PerformanceElementTiming-Objekt sein. event-
Berichtet über Ereignisverzögerungen.
Die Eintragsinstanz wird ein
PerformanceEventTiming-Objekt sein. first-input-
Berichtet über die First Input Delay (FID).
Die Eintragsinstanz wird ein
PerformanceEventTiming-Objekt sein. largest-contentful-paint-
Berichtet über das größte Rendering, das ein Element auf dem Bildschirm ausgelöst hat.
Die Eintragsinstanz wird ein
LargestContentfulPaint-Objekt sein. layout-shift-
Berichtet über die Stabilität des Layouts 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 langer Aufgaben.
Die Eintragsinstanz wird ein
PerformanceLongTaskTiming-Objekt sein. mark-
Berichtet über eigene, benutzerdefinierte Leistungsmarkierungen.
Die Eintragsinstanz wird ein
PerformanceMark-Objekt sein. measure-
Berichtet über eigene, benutzerdefinierte Leistungsmaße.
Die Eintragsinstanz wird ein
PerformanceMeasure-Objekt sein. -
Berichtet über das Timing der Dokumentennavigation.
Die Eintragsinstanz wird ein
PerformanceNavigationTiming-Objekt sein. paint-
Berichtet über wichtige Momente des Dokumentenrenderings (erster Anstrich, erster inhaltlicher Anstrich) während des Seitenladevorgangs.
Die Eintragsinstanz wird ein
PerformancePaintTiming-Objekt sein. resource-
Berichtet über Timing-Informationen 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 Sichtbarkeitszustandsänderungen der Seite, d.h. wenn ein Tab von Vordergrund zu Hintergrund oder umgekehrt wechselt.
Die Eintragsinstanz wird ein
VisibilityStateEntry-Objekt sein.
Beispiele
Leistungs-Einträge nach Typ filtern
Die entryType-Eigenschaft kann nützlich sein, wenn Sie bestimmte Leistungs-Einträge herausfiltern. Zum Beispiel könnten Sie alle Skriptressourcen überprüfen wollen, indem 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);
Leistungs-Einträge nach Typ erhalten
Sowohl Performance als auch PerformanceObserver bieten Methoden, die es Ihnen ermöglichen, Leistungs-Einträge direkt nach Typ zu erhalten. Sie benötigen die entryType-Eigenschaft nicht unbedingt dafür, sondern können Performance.getEntriesByType() oder PerformanceObserverEntryList.getEntriesByType() verwenden.
Auch beim Beobachten mit einem PerformanceObserver nimmt die observe()-Methode ein Array von entryTypes in ihrem Optionsobjekt entgegen, in dem Sie entscheiden können, welche Eintragsarten 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 |