Performance APIs

Um sicherzustellen, dass Webanwendungen schnell sind, ist es wichtig, verschiedene Leistungskennzahlen zu messen und zu analysieren. Die Performance-API bietet wichtige integrierte Metriken und die Möglichkeit, eigene Messungen zur Leistungstimeline des Browsers hinzuzufügen. Die Leistungstimeline enthält hochpräzise Zeitstempel und kann in Entwickler-Tools angezeigt werden. Sie können deren Daten auch an Analyse-Endpunkte senden, um Leistungskennzahlen im Laufe der Zeit zu protokollieren.

Jede Leistungskennzahl wird durch einen einzelnen PerformanceEntry dargestellt. Ein Leistungs-Eintrag hat einen name, eine duration, eine startTime und einen type. Alle Leistungskennzahlen erweitern das PerformanceEntry-Interface und qualifizieren es weiter.

Die meisten der Leistungseinträge werden für Sie aufgezeichnet, ohne dass Sie etwas tun müssen, und sind entweder über Performance.getEntries() oder (bevorzugt) über PerformanceObserver zugänglich. Zum Beispiel werden PerformanceEventTiming-Einträge für Ereignisse aufgezeichnet, die länger als ein festgelegter Schwellenwert dauern. Aber die Performance-API ermöglicht es Ihnen auch, eigene benutzerdefinierte Ereignisse zu definieren und aufzuzeichnen, indem Sie die Schnittstellen PerformanceMark und PerformanceMeasure verwenden.

Die Hauptschnittstelle Performance ist sowohl in den globalen Bereichen Window als auch Worker verfügbar und ermöglicht es Ihnen, benutzerdefinierte Leistungseinträge hinzuzufügen, Leistungseinträge zu löschen und Leistungseinträge abzurufen.

Die Schnittstelle PerformanceObserver ermöglicht es Ihnen, verschiedenen Arten von Leistungseinträgen zuzuhören, sobald sie aufgezeichnet werden.

Für weitere konzeptionelle Informationen siehe die Leitfäden zur Performance-API unten.

Die folgenden Schnittstellen sind in der Performance-API vorhanden:

EventCounts

Eine schreibgeschützte Abbildung, die von performance.eventCounts zurückgegeben wird und die Anzahl der Ereignisse enthält, die pro Ereignistyp gesendet wurden.

LargestContentfulPaint

Misst die Renderzeit des größten sichtbaren Bildes oder Textblocks innerhalb des Viewports, aufgezeichnet ab dem Zeitpunkt, an dem die Seite anfängt zu laden.

LayoutShift

Bietet Einblicke in die Layoutstabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.

LayoutShiftAttribution

Bietet Debug-Informationen über Elemente, die sich verschoben haben.

NotRestoredReasonDetails

Repräsentiert einen einzelnen Grund, warum eine navigierte Seite daran gehindert wurde, den Back/Forward-Cache (bfcache) zu nutzen.

NotRestoredReasons

Bietet Berichtsdaten mit Gründen, warum das aktuelle Dokument daran gehindert wurde, den Back/Forward-Cache (bfcache) bei der Navigation zu nutzen.

Performance

Hauptschnittstelle zum Zugriff auf Leistungsdaten. Verfügbar in Fenster- und Worker-Kontexten über Window.performance oder WorkerGlobalScope.performance.

PerformanceElementTiming

Misst Rendering-Zeitstempel spezifischer Elemente.

PerformanceEntry

Ein Eintrag in der Leistungstimeline, der eine einzelne Leistungskennzahl einkapselt. Alle Leistungskennzahlen erben von diesem Interface.

PerformanceEventTiming

Misst Latenz von Ereignissen und Interaction to Next Paint (INP).

PerformanceLongAnimationFrameTiming

Bietet Metriken zu langen Animationsbildern (LoAFs), die das Rendering auslasten und andere Aufgaben blockieren.

PerformanceLongTaskTiming

Bietet Metriken zu langen Aufgaben, die das Rendering auslasten und andere Aufgaben blockieren.

PerformanceMark

Benutzerdefinierter Marker für Ihren eigenen Eintrag in der Leistungstimeline.

PerformanceMeasure

Benutzerdefinierte Zeitmessung zwischen zwei Leistungseinträgen.