PerformanceLongAnimationFrameTiming

Beschreibung

Lange Animationsframes (LoAFs) sind Aktualisierungen der Darstellung, die sich um mehr als 50 ms verzögern. LoAFs können Aktualisierungen der Benutzeroberfläche (UI) verlangsamen, sodass Bedienelemente nicht mehr zu reagieren scheinen und ruckelige (nicht flüssige) Animationseffekte und Scrollbewegungen entstehen. Das führt häufig zu Frustration bei Benutzern.

Das PerformanceLongAnimationFrameTiming-Interface liefert die folgenden detaillierten Informationen zu LoAFs, mit denen Entwickler deren Ursachen eingrenzen können:

• Detaillierte Zeitstempel für jeden LoAF.
• Detaillierte Informationen zu jedem Skript, das zum Entstehen des LoAF beigetragen hat, über die Eigenschaft PerformanceLongAnimationFrameTiming.scripts. Sie gibt ein Array von PerformanceScriptTiming-Objekten zurück, eines für jedes Skript.

PerformanceLongAnimationFrameTiming erbt von PerformanceEntry.

Instanzeigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformanceLongAnimationFrameTiming.blockingDuration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Gesamtzeit in Millisekunden angibt, während der der Hauptthread daran gehindert war, auf Aufgaben mit hoher Priorität wie Benutzereingaben zu reagieren. Zur Berechnung werden alle langen Aufgaben innerhalb des LoAF mit einer duration von mehr als 50ms herangezogen. Von jeder dieser Aufgaben werden 50ms abgezogen, die Darstellungszeit wird zur Dauer der längsten Aufgabe addiert und die Ergebnisse werden summiert.

PerformanceLongAnimationFrameTiming.firstUIEventTimestamp Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt angibt, zu dem das erste UI-Ereignis – etwa ein Maus- oder Tastaturereignis – während des aktuellen Animationsframes in die Warteschlange gestellt wurde.

PerformanceLongAnimationFrameTiming.paintTime

Gibt den Zeitstempel zurück, zu dem die Darstellungsphase endete und der Animationsframe begann.

PerformanceLongAnimationFrameTiming.presentationTime

Gibt den Zeitstempel zurück, zu dem die UI-Aktualisierung tatsächlich auf dem Bildschirm dargestellt wurde.

PerformanceLongAnimationFrameTiming.renderStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Beginn des Darstellungszyklus angibt. Dieser umfasst Window.requestAnimationFrame()-Callbacks, Stil- und Layoutberechnungen sowie ResizeObserver- und IntersectionObserver-Callbacks.

PerformanceLongAnimationFrameTiming.scripts Schreibgeschützt

Gibt ein Array von PerformanceScriptTiming-Instanzen zurück.

PerformanceLongAnimationFrameTiming.styleAndLayoutStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Beginn des Zeitraums angibt, in dem Stil- und Layoutberechnungen für den aktuellen Animationsframe durchgeführt werden.

Das Interface erweitert außerdem die folgenden Eigenschaften von PerformanceEntry, wobei sie wie beschrieben genauer definiert und eingeschränkt werden:

PerformanceEntry.duration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit in Millisekunden angibt, die für die vollständige Verarbeitung des LoAF benötigt wurde.

PerformanceEntry.entryType Schreibgeschützt

Gibt den Eintragstyp zurück, der immer "long-animation-frame" ist.

PerformanceEntry.name Schreibgeschützt

Gibt den Eintragsnamen zurück, der immer "long-animation-frame" ist.

PerformanceEntry.startTime Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt angibt, zu dem der Animationsframe begann.

Instanzmethoden

PerformanceLongAnimationFrameTiming.toJSON()

Gibt ein als JSON serialisierbares einfaches Objekt zurück, das das PerformanceLongAnimationFrameTiming-Objekt repräsentiert. Die Methode wird automatisch von JSON.stringify() aufgerufen.

Beispiele

Beispiele zur Long Animation Frames API finden Sie unter Zeitmessung langer Animationsframes.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Zeitmessung langer Animationsframes
• PerformanceScriptTiming