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 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 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 Leistungseinträge werden für Sie aufgezeichnet, ohne dass Sie etwas tun müssen, und sind entweder über Performance.getEntries() oder (bevorzugt) über PerformanceObserver zugänglich. Zum Beispiel werden PerformanceEventTiming-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 Schnittstellen PerformanceMark und PerformanceMeasure verwenden.

Die Hauptschnittstelle Performance ist sowohl in den globalen Bereichen Window als auch Worker verfügbar und ermöglicht es Ihnen, benutzerdefinierte Leistungseinträge hinzuzufügen, Leistungseinträge zu löschen und Leistungseinträge abzurufen.

Die Schnittstelle PerformanceObserver ermöglicht es Ihnen, verschiedenen Arten von Leistungseinträgen zuzuhören, sobald sie aufgezeichnet werden.

Für weitere konzeptionelle Informationen siehe die Leitfäden zur Performance-API unten.

Referenz

Die folgenden Schnittstellen sind in der Performance-API vorhanden:

Eine schreibgeschützte Abbildung, die von performance.eventCounts zurückgegeben wird und die Anzahl der Ereignisse enthält, die pro Ereignistyp gesendet wurden.

Misst die Renderzeit des größten sichtbaren Bildes oder Textblocks innerhalb des Viewports, aufgezeichnet ab dem Zeitpunkt, an dem die Seite anfängt zu laden.

Bietet Einblicke in die Layoutstabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.

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

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

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

Hauptschnittstelle zum Zugriff auf Leistungsdaten. Verfügbar in Fenster- und Worker-Kontexten über Window.performance oder WorkerGlobalScope.performance.

Misst Rendering-Zeitstempel spezifischer Elemente.

Ein Eintrag in der Leistungstimeline, der eine einzelne Leistungskennzahl einkapselt. Alle Leistungskennzahlen erben von diesem Interface.

Misst Latenz von Ereignissen und Interaction to Next Paint (INP).

Bietet Metriken zu langen Animationsbildern (LoAFs), die das Rendering auslasten und andere Aufgaben blockieren.

Bietet Metriken zu langen Aufgaben, die das Rendering auslasten und andere Aufgaben blockieren.

Benutzerdefinierter Marker für Ihren eigenen Eintrag in der Leistungstimeline.

Benutzerdefinierte Zeitmessung zwischen zwei Leistungseinträgen.

Misst Dokumentnavigationsereignisse, wie die Zeit, die benötigt wird, um ein Dokument zu laden.

Lauscht auf neue Leistungseinträge, sobald sie in der Leistungstimeline aufgezeichnet werden.

Liste von Einträgen, die in einem Performance Observer beobachtet wurden.

Misst Render-Operationen während des Aufbaus einer Webseite.

Misst 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.

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

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

Identifiziert den Aufgabentyp und den Container, der für die lange Aufgabe verantwortlich ist.

Misst 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.

Spezifikationen

Siehe auch

• Webleistung
• Lernen: Webleistung