Performance APIs
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die Performance API ist eine Gruppe von Standards zur Messung der Leistung von Webanwendungen.
Konzepte und Verwendung
Um sicherzustellen, dass Webanwendungen schnell sind, ist es wichtig, verschiedene Leistungskennzahlen zu messen und zu analysieren. Die Performance API bietet wichtige eingebaute Metriken und die Möglichkeit, eigene Messungen zur Browser-Performance-Zeitleiste hinzuzufügen. Die Performance-Zeitleiste enthält hochpräzise Zeitstempel und kann in den Entwicklerwerkzeugen angezeigt werden. Sie können deren Daten auch an Analyse-Endpunkte senden, um Performance-Metriken über die Zeit hinweg aufzuzeichnen.
Jede Leistungsmetrik wird durch einen einzelnen PerformanceEntry dargestellt. Ein Performance-Eintrag hat einen name, eine duration, eine startTime und einen type. Alle Leistungsmetriken erweitern die PerformanceEntry-Schnittstelle und definieren sie weiter.
Die meisten Performance-Einträge werden für Sie aufgezeichnet, ohne dass Sie etwas tun müssen, und sind dann entweder über Performance.getEntries() oder (vorzugsweise) über PerformanceObserver zugänglich. Zum Beispiel werden PerformanceEventTiming-Einträge für Ereignisse aufgezeichnet, die länger als eine bestimmte Schwelle 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 Scopes Window als auch Worker verfügbar und ermöglicht es Ihnen, benutzerdefinierte Performance-Einträge hinzuzufügen, Performance-Einträge zu löschen und Performance-Einträge abzurufen.
Die Schnittstelle PerformanceObserver ermöglicht es Ihnen, verschiedenen Arten von Performance-Einträgen zu lauschen, während sie aufgezeichnet werden.
Für weitere konzeptionelle Informationen siehe die Performance API-Leitfäden unten.
Referenz
Die folgenden Schnittstellen sind in der Performance API enthalten:
EventCounts-
Eine schreibgeschützte Karte, die von
performance.eventCountszurückgegeben wird und die Anzahl der pro Ereignistyp gesendeten Ereignisse enthält. LargestContentfulPaint-
Misst die Renderzeit des größten sichtbaren Bildes oder Textblocks innerhalb des Ansichtsfensters, aufgezeichnet ab dem Zeitpunkt, an dem die Seite zu laden beginnt.
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 Zurück-Weiter-Cache (bfcache) zu verwenden.
NotRestoredReasons-
Bietet Berichtsdatensätze, die Gründe enthalten, warum das aktuelle Dokument daran gehindert wurde, den Zurück-Weiter-Cache (bfcache) bei der Navigation zu verwenden.
Performance-
Hauptschnittstelle zum Zugriff auf Leistungs-Messungen. Verfügbar in Fenster- und Worker-Kontexten mit
Window.performanceoderWorkerGlobalScope.performance. PerformanceElementTiming-
Misst die Renderzeitstempel spezifischer Elemente.
PerformanceEntry-
Ein Eintrag in der Performance-Zeitleiste, der eine einzelne Leistungsmetrik kapselt. Alle Leistungsmetriken erben von dieser Schnittstelle.
PerformanceEventTiming-
Misst die Latenz von Ereignissen und die Verzögerung der ersten Eingabe (FID).
PerformanceLongAnimationFrameTiming-
Bietet Metriken zu langen Animationsbildern (LoAFs), die Rendering belegen und andere Aufgaben blockieren.
PerformanceLongTaskTiming-
Bietet Metriken zu langen Aufgaben (Long Tasks), die Rendering belegen und andere Aufgaben blockieren.
PerformanceMark-
Benutzerdefinierter Marker für Ihren eigenen Eintrag in der Performance-Zeitleiste.
PerformanceMeasure-
Benutzerdefinierte Zeitmessung zwischen zwei Performance-Einträgen.
-
Misst Ereignisse der Dokumentennavigation, zum Beispiel wie lange es dauert, ein Dokument zu laden.
PerformanceObserver-
Lauscht für neue Performance-Einträge, während diese in der Performance-Zeitleiste erfasst werden.
PerformanceObserverEntryList-
Liste der Einträge, die in einem Performance-Observer beobachtet wurden.
PerformancePaintTiming-
Misst Renderoperationen während des Baus einer Webseite.
PerformanceResourceTiming-
Misst Netzwerk-Lademetriken wie Zeitpunkte für den Anfang und das Ende von Umleitungen, den Beginn von Abrufen, den Beginn und das Ende von DNS-Lookups, Beginn und Ende von Antworten für Ressourcen wie Bilder, Skripte, Abruf-Aufrufe usw.
PerformanceScriptTiming-
Bietet Metriken zu einzelnen Skripten, die lange Animationsbilder (LoAFs) verursachen.
PerformanceServerTiming-
Stellt Servermetriken dar, die mit der Antwort im
Server-TimingHTTP-Header gesendet werden. TaskAttributionTiming-
Identifiziert die Art der Aufgabe und das Container-Element, das für die lange Aufgabe verantwortlich ist.
VisibilityStateEntry-
Misst die Timing-Änderungen des Sichtbarkeitsstatus der Seite, d.h., wenn ein Tab vom Vordergrund in den Hintergrund wechselt oder umgekehrt.
Leitfäden
Die folgenden Leitfäden helfen Ihnen, die wichtigsten Konzepte der Performance API zu verstehen und geben einen Überblick über ihre Fähigkeiten:
- Performance-Daten: Erfassung, Zugriff und Arbeit mit Leistungsdaten.
- Präzise Zeitmessung: Messen mit hochpräzisen Zeit- und monotonen Uhren.
- Ressourcen-Timing: Messung der Netzwerklastzeiten für abgerufene Ressourcen wie Bilder, CSS und JavaScript.
- Navigationstiming: Messung der Navigationstiming eines Dokuments.
- Benutzer-Timing: Messen und Aufzeichnen von Leistungsdaten, die speziell für Ihre Anwendung sind.
- Server-Timing: Erfassung von serverseitigen Metriken.
- Timing langer Animationsbilder: Erfassung von Metriken zu langen Animationsbildern (LoAFs) und deren Ursachen.
- Überwachung von Gründen für die Blockierung des bfcache: Berichterstattung darüber, warum das aktuelle Dokument daran gehindert wurde, den Zurück-Weiter-Cache (bfcache) zu verwenden.