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 der Leistungsmetrik darstellt, den 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-
Berichtet über die Ladezeit von Elementen.
Die Eintragsinstanz wird ein
PerformanceElementTiming-Objekt sein. event-
Berichtet über die Verzögerungen von Ereignissen.
Die Eintragsinstanz wird ein
PerformanceEventTiming-Objekt sein. first-input-
Berichtet über die erste Eingabeverzögerung (FID).
Die Eintragsinstanz wird ein
PerformanceEventTiming-Objekt sein. largest-contentful-paint-
Berichtet über das größte Rendern eines Elements auf dem Bildschirm.
Die Eintragsinstanz wird ein
LargestContentfulPaint-Objekt sein. layout-shift-
Berichtet über die Layout-Stabilität 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 von langen Aufgaben.
Die Eintragsinstanz wird ein
PerformanceLongTaskTiming-Objekt sein. mark-
Berichtet über Ihre eigenen benutzerdefinierten Leistungsmarkierungen.
Die Eintragsinstanz wird ein
PerformanceMark-Objekt sein. measure-
Berichtet über Ihre eigenen benutzerdefinierten Leistungsmaße.
Die Eintragsinstanz wird ein
PerformanceMeasure-Objekt sein. -
Berichtet über das Timing der Dokumenten-Navigation.
Die Eintragsinstanz wird ein
PerformanceNavigationTiming-Objekt sein. paint-
Berichtet über wichtige Momente des Dokumenten-Renderings (erste Darstellung, erster inhaltsvoller Anstrich) während des Ladens der Seite.
Die Eintragsinstanz wird ein
PerformancePaintTiming-Objekt sein. resource-
Berichtet über Zeitinformationen 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 Sichtbarkeitszustandswechseln der Seite, d. h. wenn ein Tab vom Vordergrund in den Hintergrund oder umgekehrt wechselt.
Die Eintragsinstanz wird ein
VisibilityStateEntry-Objekt sein.
Beispiele
Filtern von Leistungseinträgen nach Typ
Die entryType-Eigenschaft kann nützlich sein, wenn spezifische Leistungseinträge herausgefiltert werden sollen. Beispielsweise könnten Sie alle Skript-Ressourcen ü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 Leistungseinträgen nach Typ
Sowohl Performance als auch PerformanceObserver bieten Methoden, die es Ihnen erlauben, Leistungseinträge direkt nach Typ abzurufen. Sie benötigen dafür nicht unbedingt die entryType-Eigenschaft, sondern können stattdessen Performance.getEntriesByType() oder PerformanceObserverEntryList.getEntriesByType() verwenden.
Auch wenn Sie mit einem PerformanceObserver beobachten, nimmt die observe()-Methode ein Array von entryTypes in ihrem Optionsobjekt, mit dem Sie entscheiden können, 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
| Specification |
|---|
| Performance Timeline # dom-performanceentry-entrytype |
Browser-Kompatibilität
BCD tables only load in the browser