Performance APIs

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 Entwicklerwerkzeugen angezeigt werden. Sie können die Daten auch an Analyse-Endpunkte senden, um Leistungsmetriken über die Zeit aufzuzeichnen.

Jede Leistungsmetrik wird durch einen einzelnen PerformanceEntry dargestellt. Ein Leistungseintrag hat einen name, eine duration, eine startTime und einen type. Alle Leistungsmetriken erweitern das PerformanceEntry-Interface und qualifizieren es weiter.

Die meisten Leistungseinträ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 ein festgelegter Schwellenwert dauern. Aber die Performance-API ermöglicht es Ihnen auch, eigene benutzerdefinierte Ereignisse zu definieren und aufzuzeichnen, indem Sie die PerformanceMark und PerformanceMeasure-Interfaces verwenden.

Das Haupt-Interface Performance ist sowohl im Window als auch im Worker globalen Kontext verfügbar und ermöglicht es Ihnen, benutzerdefinierte Leistungseinträge hinzuzufügen, Leistungseinträge zu löschen und Leistungseinträge abzurufen.

Das PerformanceObserver Interface ermöglicht es Ihnen, verschiedene Arten von Leistungseinträgen zu hören, sobald sie aufgezeichnet werden.

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

Die folgenden Interfaces sind in der Performance-API vorhanden:

EventCounts

Eine schreibgeschützte Karte, die von performance.eventCounts zurückgegeben wird und die Anzahl der Events enthält, die pro Event-Typ versendet wurden.

LargestContentfulPaint

Misst die Renderzeit des größten Bildes oder Textblocks, der im sichtbaren Bereich zu sehen ist, aufgezeichnet ab dem Zeitpunkt, an dem die Seite zu laden beginnt.

LayoutShift

Bietet Einblicke in die Layout-Stabilität von Webseiten basierend auf Bewegungen der Elemente auf der Seite.

LayoutShiftAttribution

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

NotRestoredReasonDetails

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

NotRestoredReasons

Bietet Berichtsinformationen, die die Gründe enthalten, warum das aktuelle Dokument an der Verwendung des Back-/Forward-Caches (bfcache) bei der Navigation gehindert wurde.

Performance

Haupt-Interface zum Zugriff auf Leistungsmaße. Verfügbar für Fenster- und Worker-Kontexte über Window.performance oder WorkerGlobalScope.performance.

PerformanceElementTiming

Misst Rendering-Zeitstempel spezifischer Elemente.

PerformanceEntry

Ein Eintrag in der Leistungstimeline, der eine einzelne Leistungsmetrik umschließt. Alle Leistungsmetriken erben von diesem Interface.

PerformanceEventTiming

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

PerformanceLongAnimationFrameTiming

Liefert Metriken zu long animation frames (LoAFs), die das Rendering beanspruchen und andere Aufgaben blockieren.

PerformanceLongTaskTiming

Liefert Metriken zu long tasks, die das Rendering beanspruchen und andere Aufgaben blockieren.

PerformanceMark

Benutzerdefinierte Markierung für Ihren eigenen Eintrag in der Leistungstimeline.

PerformanceMeasure

Benutzerdefinierte Zeitmessung zwischen zwei Leistungseinträgen.

PerformanceNavigationTiming

Misst Dokumentnavigations-Ereignisse, wie lange es dauert, ein Dokument zu laden.

PerformanceObserver

Hört auf neue Leistungseinträge, während sie in der Leistungstimeline aufgezeichnet werden.

PerformanceObserverEntryList

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

PerformancePaintTiming

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

PerformanceResourceTiming

Misst Netzwerk-Ladezeiten wie Redirect-Start- und Endzeiten, Fetch-Start, DNS-Lookup-Start- und Endzeiten, Antwort-Start- und Endzeiten für Ressourcen wie Bilder, Skripte, Fetch-Aufrufe etc.

PerformanceScriptTiming

Liefert Metriken zu individuellen Skripten, die long animation frames (LoAFs) verursachen.

PerformanceServerTiming

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

TaskAttributionTiming

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

VisibilityStateEntry

Misst das Timing von Änderungen des Sichtbarkeitsstatus einer Seite, d.h. wenn ein Tab vom Vordergrund in den Hintergrund wechselt oder umgekehrt.

Die folgenden Leitfäden helfen Ihnen, die Schlüsselkonzepte der Performance-API zu verstehen und bieten einen Überblick über deren Fähigkeiten:

• Performance-Daten: Sammeln, Zugreifen und Arbeiten mit Leistungsdaten.
• Hochpräzise Zeitmessung: Messen mit hochpräzisen Zeit- und monotonen Uhren.
• Ressourcen-Timing: Messen von Netzwerktimings für abgerufene Ressourcen, wie Bilder, CSS und JavaScript.
• Navigationstiming: Messen der Navigationszeit eines Dokuments.
• Benutzerdefiniertes Timing: Messen und Aufzeichnen von Leistungsdaten, die auf Ihre Anwendung zugeschnitten sind.
• Server-Timing: Sammeln von Server-seitigen Metriken.
• Timing langer Animationsrahmen: Sammeln von Metriken zu langen Animationsrahmen (LoAFs) und deren Ursachen.
• Überwachung von Gründen, die bfcache blockieren: Berichterstattung darüber, warum das aktuelle Dokument an der Nutzung des Back-/Forward-Caches (bfcache) gehindert wurde.

• Web-Performance
• Lernen: Web-Performance