Performance APIs
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die Performance-API ist eine Gruppe von Standards, die zur Messung der Leistung von Webanwendungen verwendet werden.
Konzepte und Nutzung
Um sicherzustellen, dass 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 Leistungstimeline des Browsers hinzuzufügen. Die Leistungstimeline enthält hochpräzise Zeitstempel und kann in den Developer-Tools angezeigt werden. Sie können deren Daten auch an Analyseendpunkte senden, um Leistungsmetriken im Laufe der Zeit aufzuzeichnen.
Jede Leistungskennzahl wird durch einen einzelnen PerformanceEntry dargestellt. Ein Performance-Eintrag hat einen name, eine duration, eine startTime und einen type. Alle Leistungsmetriken erweitern das PerformanceEntry-Interface und qualifizieren es weiter.
Die meisten Performance-Einträge werden für Sie aufgezeichnet, ohne dass Sie etwas unternehmen müssen, und sind dann entweder über Performance.getEntries() oder (vorzugsweise) über den PerformanceObserver zugänglich. Zum Beispiel werden PerformanceEventTiming-Einträge für Ereignisse aufgezeichnet, die länger als ein festgelegter Grenzwert dauern. Die Performance-API ermöglicht es Ihnen jedoch auch, eigene benutzerdefinierte Ereignisse mit den PerformanceMark- und PerformanceMeasure-Interfaces zu definieren und aufzuzeichnen.
Das Haupt-Performance-Interface ist sowohl im Window als auch im Worker-globalen Bereich verfügbar und ermöglicht es Ihnen, benutzerdefinierte Performance-Einträge hinzuzufügen, Performance-Einträge zu löschen und Performance-Einträge abzurufen.
Das PerformanceObserver-Interface ermöglicht es Ihnen, auf verschiedene Arten von Performance-Einträgen zu lauschen, wenn sie aufgezeichnet werden.
Für weitere konzeptionelle Informationen siehe die untenstehenden Performance-API-Leitfäden.
Referenz
Die folgenden Schnittstellen sind in der Performance-API vorhanden:
EventCounts-
Eine schreibgeschützte Map, die von
performance.eventCountszurückgegeben wird und die Anzahl der Ereignisse enthält, die pro Ereignistyp ausgelöst wurden. InteractionContentfulPaint-
Misst die Renderzeit von contentful paints, die einer Interaktion zugeordnet sind.
LargestContentfulPaint-
Misst die Renderzeit des größten Bildes oder Textblocks, der innerhalb des Viewports sichtbar ist und aufgezeichnet wird, ab wann die Seite zu laden beginnt.
LayoutShift-
Bietet Einblicke in die Layout-Stabilität von Webseiten basierend auf den Bewegungen der Elemente auf der Seite.
LayoutShiftAttribution-
Bietet Debug-Informationen über Elemente, die sich verschoben haben. Dies ist verfügbar durch
LayoutShift-Einträge. NotRestoredReasonDetails-
Repräsentiert einen einzelnen Grund, warum eine navigierte Seite daran gehindert wurde, den Vorwärts/Rückwärts-Cache (bfcache) zu verwenden. Verfügbar über
NotRestoredReasons-Einträge. NotRestoredReasons-
Liefert Berichtsdaten, die Gründe enthalten, warum das aktuelle Dokument daran gehindert wurde, den Vorwärts/Rückwärts-Cache (bfcache) bei der Navigation zu verwenden. Verfügbar über
PerformanceNavigationTiming-Einträge. Performance-
Hauptschnittstelle, um auf Leistungsmaßnahmen zuzugreifen. Verfügbar für Fenster- und Worker-Kontexte mit
Window.performanceoderWorkerGlobalScope.performance. PerformanceContainerTiming-
Misst Rendering-Zeitstempel spezifischer Container mehrerer Elemente.
PerformanceElementTiming-
Misst Rendering-Zeitstempel bestimmter Elemente.
PerformanceEntry-
Ein Eintrag in der Leistungstimeline, der eine einzelne Leistungskennzahl verkapselt. Alle Leistungskennzahlen erben von diesem Interface.
PerformanceEventTiming-
Misst Latenzzeiten von Ereignissen und Interaction to Next Paint (INP).
PerformanceLongAnimationFrameTiming-
Liefert Metriken zu langen Animationsbildern (LoAFs), die das Rendering besetzen und andere Aufgaben blockieren.
PerformanceLongTaskTiming-
Liefert Metriken zu langen Aufgaben, die das Rendering besetzen und andere Aufgaben blockieren.
PerformanceMark-
Benutzerdefinierter Marker für Ihren eigenen Eintrag auf der Leistungstimeline.
PerformanceMeasure-
Benutzerdefinierte Zeitmessung zwischen zwei Leistungseinträgen.
-
Misst Dokumentnavigationsereignisse, wie lange es dauert, ein Dokument zu laden.
PerformanceObserver-
Lauscht auf neue Leistungseinträge, wenn sie in der Leistungstimeline aufgezeichnet werden.
PerformanceObserverEntryList-
Liste der Einträge, die in einem Performance-Observer beobachtet wurden.
PerformancePaintTiming-
Misst Render-Operationen während des Aufbaus einer Webseite.
PerformanceResourceTiming-
Misst Netzwerklade-Metriken wie die Start- und Endzeiten von Weiterleitungen, den Beginn des Abrufs, die Start- und Endzeiten der DNS-Auflösung, Start- und Endzeiten der Antwort für Ressourcen wie Bilder, Skripte, Abrufaufrufe usw.
PerformanceScriptTiming-
Liefert Metriken zu einzelnen Skripten, die lange Animationsbilder (LoAFs) verursachen.
PerformanceServerTiming-
Stellt Servermetriken bereit, die mit der Antwort im
Server-TimingHTTP-Header gesendet werden. Dies ist verfügbar überPerformanceNavigationTimingundPerformanceResourceTiming-Einträge. -
Misst, wann Soft Navigations auftreten.
TaskAttributionTiming-
Identifiziert den Typ der Aufgabe und den Container, der für eine lange Aufgabe verantwortlich ist. Dies ist verfügbar durch
PerformanceLongTaskTiming-Einträge. VisibilityStateEntry-
Misst das Timing von Änderungen des Seiten-Sichtbarkeitszustands, d.h. wann ein Tab vom Vordergrund in den Hintergrund oder umgekehrt wechselt.
Leitfäden
Die folgenden Leitfäden helfen Ihnen, die Schlüsselkonzepte der Performance-API zu verstehen und bieten einen Überblick über ihre Fähigkeiten:
- Leistungsdaten: Sammeln, Zugreifen und Arbeiten mit Leistungsdaten.
- Hochpräzise Zeitmessung: Messen mit hochpräziser Zeit und monotonen Uhren.
- Ressourcen-Timing: Messen der Netzwerkauslastung für abgerufene Ressourcen wie Bilder, CSS und JavaScript.
- Navigations-Timing: Messen der Navigationsdauer eines Dokuments.
- Benutzerdefiniertes Timing: Messen und Aufzeichnen von Leistungsdaten, die speziell für Ihre Anwendung relevant sind.
- Server-Timing: Sammeln von serverseitigen Metriken.
- Langes Animationszeit-Frame-Timing: Sammeln von Metriken zu langen Animationsbildern (LoAFs) und ihren Ursachen.
- Überwachung von bfcache-Blockierungsgründen: Berichterstattung darüber, warum das aktuelle Dokument daran gehindert wurde, den Vorwärts/Rückwärts-Cache (bfcache) zu verwenden.