Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Performance APIs
Hinweis: Diese Funktion ist inWeb Workers verfügbar.
Die Performance-API ist eine Gruppe von Standards, die verwendet werden, um die Leistung von Webanwendungen zu messen.
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 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 einzelnenPerformanceEntry dargestellt. Ein Leistungs-Eintrag hat einenname, eineduration, einestartTime und einentype. Alle Leistungskennzahlen erweitern dasPerformanceEntry-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 überPerformance.getEntries() oder (bevorzugt) überPerformanceObserver zugänglich. Zum Beispiel werdenPerformanceEventTiming-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 SchnittstellenPerformanceMark undPerformanceMeasure verwenden.
Die HauptschnittstellePerformance ist sowohl in den globalen BereichenWindow als auchWorker verfügbar und ermöglicht es Ihnen, benutzerdefinierte Leistungseinträge hinzuzufügen, Leistungseinträge zu löschen und Leistungseinträge abzurufen.
Die SchnittstellePerformanceObserver ermöglicht es Ihnen, verschiedenen Arten von Leistungseinträgen zuzuhören, sobald sie aufgezeichnet werden.
Für weitere konzeptionelle Informationen siehe dieLeitfäden zur Performance-API unten.
Referenz
Die folgenden Schnittstellen sind in der Performance-API vorhanden:
EventCountsEine schreibgeschützte Abbildung, die von
performance.eventCountszurückgegeben wird und die Anzahl der Ereignisse enthält, die pro Ereignistyp gesendet wurden.LargestContentfulPaintMisst die Renderzeit des größten sichtbaren Bildes oder Textblocks innerhalb des Viewports, aufgezeichnet ab dem Zeitpunkt, an dem die Seite anfängt zu laden.
LayoutShiftBietet Einblicke in die Layoutstabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.
LayoutShiftAttributionBietet Debug-Informationen über Elemente, die sich verschoben haben.
NotRestoredReasonDetailsRepräsentiert einen einzelnen Grund, warum eine navigierte Seite daran gehindert wurde, den Back/Forward-Cache (bfcache) zu nutzen.
NotRestoredReasonsBietet Berichtsdaten mit Gründen, warum das aktuelle Dokument daran gehindert wurde, den Back/Forward-Cache (bfcache) bei der Navigation zu nutzen.
PerformanceHauptschnittstelle zum Zugriff auf Leistungsdaten. Verfügbar in Fenster- und Worker-Kontexten über
Window.performanceoderWorkerGlobalScope.performance.PerformanceElementTimingMisst Rendering-Zeitstempel spezifischer Elemente.
PerformanceEntryEin Eintrag in der Leistungstimeline, der eine einzelne Leistungskennzahl einkapselt. Alle Leistungskennzahlen erben von diesem Interface.
PerformanceEventTimingMisst Latenz von Ereignissen undInteraction to Next Paint (INP).
PerformanceLongAnimationFrameTimingBietet Metriken zulangen Animationsbildern (LoAFs), die das Rendering auslasten und andere Aufgaben blockieren.
PerformanceLongTaskTimingBietet Metriken zulangen Aufgaben, die das Rendering auslasten und andere Aufgaben blockieren.
PerformanceMarkBenutzerdefinierter Marker für Ihren eigenen Eintrag in der Leistungstimeline.
PerformanceMeasureBenutzerdefinierte Zeitmessung zwischen zwei Leistungseinträgen.
PerformanceNavigationTimingMisst Dokumentnavigationsereignisse, wie die Zeit, die benötigt wird, um ein Dokument zu laden.
PerformanceObserverLauscht auf neue Leistungseinträge, sobald sie in der Leistungstimeline aufgezeichnet werden.
PerformanceObserverEntryListListe von Einträgen, die in einem Performance Observer beobachtet wurden.
PerformancePaintTimingMisst Render-Operationen während des Aufbaus einer Webseite.
PerformanceResourceTimingMisst Netzwerk-Lademetriken wie Redirect-Start- und Endzeiten, Fetch-Start, DNS-Lookup-Start- und Endzeiten, Antwort-Start- und Endzeiten für Ressourcen wie Bilder, Skripte, Fetch-Aufrufe usw.
PerformanceScriptTimingBietet Metriken zu einzelnen Skripten, dielange Animationsbilder (LoAFs) verursachen.
PerformanceServerTimingZeigt Servermetriken an, die mit der Antwort im
Server-TimingHTTP-Header gesendet werden.TaskAttributionTimingIdentifiziert den Aufgabentyp und den Container, der für die lange Aufgabe verantwortlich ist.
VisibilityStateEntryMisst das Timing von Änderungen des Sichtbarkeitsstatus der Seite, d.h. wenn ein Tab von Vordergrund zu 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äzisions-Timing: Messen mit hochpräzisen Zeit- und monotonen Uhren.
- Ressourcen-Timing: Messen von Netzwerk-Timing für abgerufene Ressourcen wie Bilder, CSS und JavaScript.
- Navigations-Timing: Messen des Navigations-Timings eines Dokuments.
- Benutzerdefiniertes Timing: Messen und Aufzeichnen von Leistungsdaten, die spezifisch für 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-Blockierungsgründen: Bericht über Gründe, warum das aktuelle Dokument daran gehindert wurde, den Back/Forward-Cache (bfcache) zu nutzen.