Performance APIs
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die Performance API ist eine Gruppe von Standards zur Messung der Leistung von Webanwendungen.
Konzepte und Verwendung
Damit Webanwendungen schnell sind, ist es wichtig, verschiedene Leistungsmetriken zu messen und zu analysieren. Die Performance API bietet wichtige integrierte Metriken und die Möglichkeit, eigene Messungen zur Performance-Zeitleiste des Browsers hinzuzufügen. Die Performance-Zeitleiste enthält hochpräzise Zeitstempel und kann in den Entwicklertools angezeigt werden. Sie können ihre Daten auch an Analyse-Endpunkte senden, um Leistungsmetriken im Zeitverlauf zu erfassen.
Jede Leistungsmetrik wird durch einen einzelnen PerformanceEntry dargestellt. Ein Performance-Eintrag hat einen name, eine duration, eine startTime und einen type. Alle Leistungsmetriken erweitern das Interface PerformanceEntry und spezifizieren es genauer.
Die meisten Performance-Einträge werden automatisch erfasst, ohne dass Sie etwas dafür tun müssen. Anschließend können Sie entweder über Performance.getEntries() oder vorzugsweise über PerformanceObserver darauf zugreifen. Beispielsweise werden PerformanceEventTiming-Einträge für Ereignisse erfasst, die länger als einen festgelegten Schwellenwert dauern. Mit der Performance API können Sie über die Interfaces PerformanceMark und PerformanceMeasure aber auch eigene Ereignisse definieren und erfassen.
Das zentrale Interface Performance ist sowohl im globalen Gültigkeitsbereich von Window als auch von Worker verfügbar. Damit können Sie eigene Performance-Einträge hinzufügen, Performance-Einträge löschen und Performance-Einträge abrufen.
Mit dem Interface PerformanceObserver können Sie auf verschiedene Arten von Performance-Einträgen reagieren, während diese erfasst werden.
Weitere Informationen zu den Konzepten finden Sie in den Leitfäden zur Performance API weiter unten.
Referenz
Die folgenden Interfaces gehören zur Performance API:
EventCounts-
Eine schreibgeschützte Map, die von
performance.eventCountszurückgegeben wird und die Anzahl der ausgelösten Ereignisse pro Ereignistyp enthält. InteractionContentfulPaint-
Misst die Rendering-Zeit von Contentful Paints, die einer Interaktion zugeordnet sind.
LargestContentfulPaint-
Misst die Rendering-Zeit des größten Bildes oder Textblocks, der im Viewport sichtbar ist, ab dem Beginn des Seitenladevorgangs.
LayoutShift-
Liefert anhand der Bewegungen von Elementen auf der Seite Einblicke in die Layoutstabilität von Webseiten.
LayoutShiftAttribution-
Liefert Debugging-Informationen zu Elementen, die sich verschoben haben. Diese Informationen sind über
LayoutShift-Einträge verfügbar. NotRestoredReasonDetails-
Stellt einen einzelnen Grund dar, warum eine Seite bei der Navigation den Back/Forward Cache (bfcache) nicht verwenden konnte. Diese Information ist über
NotRestoredReasons-Einträge verfügbar. NotRestoredReasons-
Stellt Berichtsdaten mit Gründen bereit, warum das aktuelle Dokument bei der Navigation den Back/Forward Cache (bfcache) nicht verwenden konnte. Diese Daten sind über
PerformanceNavigationTiming-Einträge verfügbar. Performance-
Zentrales Interface für den Zugriff auf Leistungsmessungen. Es ist in Window- und Worker-Kontexten über
Window.performancebeziehungsweiseWorkerGlobalScope.performanceverfügbar. PerformanceContainerTiming-
Misst Rendering-Zeitstempel bestimmter Container mit mehreren Elementen.
PerformanceElementTiming-
Misst Rendering-Zeitstempel bestimmter Elemente.
PerformanceEntry-
Ein Eintrag auf der Performance-Zeitleiste, der eine einzelne Leistungsmetrik enthält. Alle Leistungsmetriken erben von diesem Interface.
PerformanceEventTiming-
Misst die Latenz von Ereignissen und Interaction to Next Paint (INP).
PerformanceLongAnimationFrameTiming-
Liefert Metriken zu langen Animationsframes (LoAFs), die Rendering-Kapazität beanspruchen und die Ausführung anderer Aufgaben blockieren.
PerformanceLongTaskTiming-
Liefert Metriken zu langen Aufgaben, die Rendering-Kapazität beanspruchen und die Ausführung anderer Aufgaben blockieren.
PerformanceMark-
Benutzerdefinierte Markierung für einen eigenen Eintrag auf der Performance-Zeitleiste.
PerformanceMeasure-
Benutzerdefinierte Zeitmessung zwischen zwei Performance-Einträgen.
-
Misst Ereignisse bei der Navigation zu einem Dokument, beispielsweise wie lange das Laden eines Dokuments dauert.
PerformanceObserver-
Reagiert auf neue Performance-Einträge, sobald sie auf der Performance-Zeitleiste erfasst werden.
PerformanceObserverEntryList-
Liste der Einträge, die von einem Performance Observer beobachtet wurden.
PerformancePaintTiming-
Misst Rendering-Vorgänge beim Aufbau einer Webseite.
PerformanceResourceTiming-
Misst Netzwerk-Ladezeiten, etwa Start- und Endzeiten von Weiterleitungen, den Beginn des Abrufs, Start- und Endzeiten von DNS-Abfragen sowie Start- und Endzeiten der Antwort für Ressourcen wie Bilder, Skripte und Fetch-Aufrufe.
PerformanceScriptTiming-
Liefert Metriken zu einzelnen Skripten, die lange Animationsframes (LoAFs) verursachen.
PerformanceServerTiming-
Macht Servermetriken zugänglich, die mit der Antwort im HTTP-Header
Server-Timinggesendet werden. Sie sind überPerformanceNavigationTiming- undPerformanceResourceTiming-Einträge verfügbar. -
Misst, wann Soft Navigations stattfinden.
TaskAttributionTiming-
Identifiziert den Aufgabentyp und den Container, die für eine lange Aufgabe verantwortlich sind. Diese Informationen sind über
PerformanceLongTaskTiming-Einträge verfügbar. VisibilityStateEntry-
Misst den Zeitpunkt von Änderungen des Sichtbarkeitsstatus einer Seite, also wann ein Tab vom Vordergrund in den Hintergrund wechselt oder umgekehrt.
Leitfäden
Die folgenden Leitfäden erläutern wichtige Konzepte der Performance API und geben einen Überblick über ihre Möglichkeiten:
- Performance-Daten: Leistungsdaten erfassen, abrufen und verwenden.
- Hochpräzise Zeitmessung: Messungen mit hochpräzisen Zeitangaben und monotonen Uhren durchführen.
- Zeitmessung für Ressourcen: Netzwerkzeiten für abgerufene Ressourcen wie Bilder, CSS und JavaScript messen.
- Zeitmessung für Navigationen: Zeitabläufe bei der Navigation zu einem Dokument messen.
- Benutzerdefinierte Zeitmessung: Anwendungsspezifische Leistungsdaten messen und erfassen.
- Serverseitige Zeitmessung: Serverseitige Metriken erfassen.
- Zeitmessung für lange Animationsframes: Metriken zu langen Animationsframes (LoAFs) und ihren Ursachen erfassen.
- Gründe für die Blockierung des bfcache überwachen: Gründe erfassen, warum das aktuelle Dokument den Back/Forward Cache (bfcache) nicht verwenden konnte.