PerformanceEntry: entryType-Eigenschaft
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 entryType-Eigenschaft gibt einen String zurück, der den Typ der Leistungsmetrik darstellt, die 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 Subtyp des PerformanceEntry-Objekts ab. Einige Subtypen haben mehr als einen entryType.
element-
Meldet die Ladezeit von Elementen.
Die Eintragsinstanz wird ein
PerformanceElementTiming-Objekt sein. event-
Meldet Latenzen von Ereignissen.
Die Eintragsinstanz wird ein
PerformanceEventTiming-Objekt sein. first-input-
Meldet die First Input Delay (FID).
Die Eintragsinstanz wird ein
PerformanceEventTiming-Objekt sein. interaction-contentful-paint-
Meldet das gröÃte Rendering eines Elements, das nach einer Interaktion auf dem Bildschirm ausgelöst wurde.
Die Eintragsinstanz wird ein
InteractionContentfulPaint-Objekt sein. largest-contentful-paint-
Meldet das gröÃte Rendering eines Elements auf dem Bildschirm.
Die Eintragsinstanz wird ein
LargestContentfulPaint-Objekt sein. layout-shift-
Meldet die Layout-Stabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.
Die Eintragsinstanz wird ein
LayoutShift-Objekt sein. long-animation-frame-
Meldet Instanzen von langen Animationsbildern (LoAFs).
Die Eintragsinstanz wird ein
PerformanceLongAnimationFrameTiming-Objekt sein. longtask-
Meldet Instanzen von langen Aufgaben.
Die Eintragsinstanz wird ein
PerformanceLongTaskTiming-Objekt sein. mark-
Meldet Ihre eigenen benutzerdefinierten Performance-Marker.
Die Eintragsinstanz wird ein
PerformanceMark-Objekt sein. measure-
Meldet Ihre eigenen benutzerdefinierten Performance-Messungen.
Die Eintragsinstanz wird ein
PerformanceMeasure-Objekt sein. -
Meldet das Timing der Dokumentennavigation.
Die Eintragsinstanz wird ein
PerformanceNavigationTiming-Objekt sein. paint-
Meldet Schlüssel-Momente des Dokumentenrenderings (erstes Rendering, erstes inhaltsvolles Rendering) während des Seitenladens.
Die Eintragsinstanz wird ein
PerformancePaintTiming-Objekt sein. resource-
Meldet Timing-Informationen für Ressourcen in einem Dokument.
Die Eintragsinstanz wird ein
PerformanceResourceTiming-Objekt sein. -
Meldet die Renderings, die nach einer Benutzerinteraktion und einem URL-Update, das eine softe Navigation auslöste, auf dem Bildschirm angezeigt wurden.
Die Eintragsinstanz wird ein
PerformanceSoftNavigation-Objekt sein. taskattribution-
Meldet die Art der Arbeit, die wesentlich zur langen Aufgabe beigetragen hat.
Die Eintragsinstanz wird ein
TaskAttributionTiming-Objekt sein. visibility-state-
Meldet das Timing von Ãnderungen der Sichtbarkeitszustände der Seite, d.h. wenn ein Tab vom Vordergrund in den Hintergrund wechselt oder umgekehrt.
Die Eintragsinstanz wird ein
VisibilityStateEntry-Objekt sein.
Beispiele
Filtern von Performance-Einträgen nach Typ
Die entryType-Eigenschaft kann nützlich sein, wenn Sie bestimmte Performance-Einträge herausfiltern möchten. 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);
Abrufen von Performance-Einträgen nach Typ
Sowohl Performance als auch PerformanceObserver bieten Methoden, die es Ihnen ermöglichen, Performance-Einträge direkt nach Typ abzurufen. Sie benötigen dafür nicht unbedingt die entryType-Eigenschaft, stattdessen könnten Sie Performance.getEntriesByType() oder PerformanceObserverEntryList.getEntriesByType() verwenden.
Auch beim Beobachten mit einem PerformanceObserver nimmt die observe()-Methode ein Array von entryTypes in ihrem Optionsobjekt, durch das Sie entscheiden können, welche Eintrittstypen 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 |