PerformanceLongAnimationFrameTiming

Beschreibung

Lange Animationsframes (LoAFs) sind Rendering-Updates, die über 50 ms hinaus verzögert sind. LoAFs können zu langsamen Benutzeroberflächen-Updates führen, wodurch Bedienelemente unempfindlich erscheinen und ruckelnde (nicht flüssige) Animationseffekte und Scrollen verursachen. Dies führt häufig zu Frustration bei den Benutzern.

Das PerformanceLongAnimationFrameTiming Interface bietet die folgende detaillierte Informationsmenge zu LoAFs, die Entwicklern ermöglicht, die Hauptursachen genauer zu identifizieren:

• Ein detailliertes Satz von Zeitstempeln für jedes LoAF.
• Detaillierte Informationen zu jedem Skript, das zur Erstellung des LoAF beigetragen hat, über die PerformanceLongAnimationFrameTiming.scripts Eigenschaft. Diese gibt ein Array von PerformanceScriptTiming Objekten zurück, eines für jedes Skript.

PerformanceLongAnimationFrameTiming erbt von PerformanceEntry.

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformanceLongAnimationFrameTiming.blockingDuration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die gesamte Zeit in Millisekunden angibt, während der der Hauptthread daran gehindert wurde, auf hochpriorisierte Aufgaben wie Benutzereingaben zu reagieren. Dies wird berechnet, indem alle long tasks innerhalb des LoAFs genommen werden, die eine duration von über 50ms haben, 50ms von jedem abgezogen wird, die Rendering-Zeit zur längsten Aufgabedauer hinzugefügt wird und die Ergebnisse summiert werden.

PerformanceLongAnimationFrameTiming.firstUIEventTimestamp Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit des ersten UI-Ereignisses — wie ein Maus- oder Tastaturereignis — angibt, das während des aktuellen Animationsframes in die Warteschlange gestellt wurde.

PerformanceLongAnimationFrameTiming.paintTime

Gibt den timestamp zurück, wenn die Rendering-Phase endete und der Animationsframe begann.

PerformanceLongAnimationFrameTiming.presentationTime

Gibt den timestamp zurück, wenn das UI-Update tatsächlich auf dem Bildschirm gezeichnet wurde.

PerformanceLongAnimationFrameTiming.renderStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Startzeitpunkt des Rendering-Zyklus angibt, der Window.requestAnimationFrame() Rückrufe, Stil- und Layout-Berechnungen, ResizeObserver Rückrufe und IntersectionObserver Rückrufe umfasst.

PerformanceLongAnimationFrameTiming.scripts Schreibgeschützt

Gibt ein Array von PerformanceScriptTiming Instanzen zurück.

PerformanceLongAnimationFrameTiming.styleAndLayoutStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Beginn der Zeitspanne angibt, die für Stil- und Layout-Berechnungen des aktuellen Animationsframes aufgewendet wurde.

Es erweitert auch die folgenden PerformanceEntry Eigenschaften, die qualifiziert und wie beschrieben eingeschränkt werden:

PerformanceEntry.duration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit in Millisekunden angibt, die zur vollständigen Verarbeitung des LoAF aufgewendet 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 die Zeit angibt, wann der Animationsframe startete.

Instanz-Methoden

PerformanceLongAnimationFrameTiming.toJSON()

Überschreibt die PerformanceEntry.toJSON() Methode, um eine JSON-Darstellung des PerformanceLongAnimationFrameTiming Objekts zurückzugeben.

Beispiele

Siehe Timing langer Animationsframes für Beispiele im Zusammenhang mit der Long Animation Frames API.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Timing langer Animationsframes
• PerformanceScriptTiming