Performance APIs

Konzepte und Verwendung

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 Mglichkeit, eigene Messungen zur Leistungstimeline des Browsers hinzuzufgen. Die Leistungstimeline enthlt hochprzise Zeitstempel und kann in Entwickler-Tools angezeigt werden. Sie knnen 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 Leistungseintrge werden fr Sie aufgezeichnet, ohne dass Sie etwas tun mssen, und sind entweder ber Performance.getEntries() oder (bevorzugt) ber PerformanceObserver zugnglich. Zum Beispiel werden PerformanceEventTiming-Eintrge fr Ereignisse aufgezeichnet, die lnger als ein festgelegter Schwellenwert dauern. Aber die Performance-API ermglicht 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 verfgbar und ermglicht es Ihnen, benutzerdefinierte Leistungseintrge hinzuzufgen, Leistungseintrge zu lschen und Leistungseintrge abzurufen.

Die Schnittstelle PerformanceObserver ermglicht es Ihnen, verschiedenen Arten von Leistungseintrgen zuzuhren, sobald sie aufgezeichnet werden.

Fr weitere konzeptionelle Informationen siehe die Leitfden zur Performance-API unten.

[UML-Diagramm der Performance-APIs]

Referenz

Die folgenden Schnittstellen sind in der Performance-API vorhanden:

EventCounts

Eine schreibgeschtzte Abbildung, die von performance.eventCounts zurckgegeben wird und die Anzahl der Ereignisse enthlt, die pro Ereignistyp gesendet wurden.

LargestContentfulPaint

Misst die Renderzeit des grten sichtbaren Bildes oder Textblocks innerhalb des Viewports, aufgezeichnet ab dem Zeitpunkt, an dem die Seite anfngt zu laden.

LayoutShift

Bietet Einblicke in die Layoutstabilitt von Webseiten basierend auf Bewegungen der Elemente auf der Seite.

LayoutShiftAttribution

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

NotRestoredReasonDetails

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

NotRestoredReasons

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

Performance

Hauptschnittstelle zum Zugriff auf Leistungsdaten. Verfgbar 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 fr Ihren eigenen Eintrag in der Leistungstimeline.

PerformanceMeasure

Benutzerdefinierte Zeitmessung zwischen zwei Leistungseintrgen.

PerformanceNavigationTiming

Misst Dokumentnavigationsereignisse, wie die Zeit, die bentigt wird, um ein Dokument zu laden.

PerformanceObserver

Lauscht auf neue Leistungseintrge, sobald sie in der Leistungstimeline aufgezeichnet werden.

PerformanceObserverEntryList

Liste von Eintrgen, die in einem Performance Observer beobachtet wurden.

PerformancePaintTiming

Misst Render-Operationen whrend des Aufbaus einer Webseite.

PerformanceResourceTiming

Misst Netzwerk-Lademetriken wie Redirect-Start- und Endzeiten, Fetch-Start, DNS-Lookup-Start- und Endzeiten, Antwort-Start- und Endzeiten fr Ressourcen wie Bilder, Skripte, Fetch-Aufrufe usw.

PerformanceScriptTiming

Bietet Metriken zu einzelnen Skripten, die lange Animationsbilder (LoAFs) verursachen.

PerformanceServerTiming

Zeigt Servermetriken an, die mit der Antwort im Server-Timing HTTP-Header gesendet werden.

TaskAttributionTiming

Identifiziert den Aufgabentyp und den Container, der fr die lange Aufgabe verantwortlich ist.

VisibilityStateEntry

Misst das Timing von nderungen des Sichtbarkeitsstatus der Seite, d.h. wenn ein Tab von Vordergrund zu Hintergrund oder umgekehrt wechselt.

Leitfden

Die folgenden Leitfden helfen Ihnen, die Schlsselkonzepte der Performance-API zu verstehen und bieten einen berblick ber ihre Fhigkeiten:

• Leistungsdaten: Sammeln, Zugreifen und Arbeiten mit Leistungsdaten.
• Hochprzisions-Timing: Messen mit hochprzisen Zeit- und monotonen Uhren.
• Ressourcen-Timing: Messen von Netzwerk-Timing fr abgerufene Ressourcen wie Bilder, CSS und JavaScript.
• Navigations-Timing: Messen des Navigations-Timings eines Dokuments.
• Benutzerdefiniertes Timing: Messen und Aufzeichnen von Leistungsdaten, die spezifisch fr Ihre Anwendung sind.
• Server-Timing: Sammeln von serverseitigen Metriken.
• Langes Animationsbilder-Timing: Sammeln von Metriken zu langen Animationsbildern (LoAFs) und deren Ursachen.
• berwachen von bfcache-Blockierungsgrnden: Bericht ber Grnde, warum das aktuelle Dokument daran gehindert wurde, den Back/Forward-Cache (bfcache) zu nutzen.

Spezifikationen

Siehe auch

• Webleistung
• Lernen: Webleistung