PerformanceLongAnimationFrameTiming

Lange Animationsrahmen (LoAFs) sind Render-Updaten, die über 50ms hinaus verzögert werden. LoAFs können zu langsamen Benutzeroberflächen- (UI) Aktualisierungen führen, wodurch Steuerungselemente unempfänglich wirken und es zu ruckeligen (nicht sanften) Animationseffekten und Scrollen kommt. Dies führt oft zu Benutzerfrustration.

Die Schnittstelle PerformanceLongAnimationFrameTiming bietet die folgende detaillierte Informationssammlung über LoAFs, damit Entwickler ihre Ursachen genauer eingrenzen können:

• Ein detaillierter 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.

Diese Schnittstelle erweitert die folgenden PerformanceEntry Eigenschaften für lange Animationsrahmen-Leistungseinträge:

PerformanceEntry.duration Nur lesbar Experimentell

Gibt ein DOMHighResTimeStamp zurück, das die benötigte Zeit in Millisekunden angibt, um das LoAF vollständig zu verarbeiten.

PerformanceEntry.entryType Nur lesbar Experimentell

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

PerformanceEntry.name Nur lesbar Experimentell

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

PerformanceEntry.startTime Nur lesbar Experimentell

Gibt ein DOMHighResTimeStamp zurück, das die Zeit angibt, zu der der Animationsrahmen begonnen hat.

Diese Schnittstelle unterstützt außerdem die folgenden Eigenschaften:

PerformanceLongAnimationFrameTiming.blockingDuration Nur lesbar Experimentell

Gibt ein DOMHighResTimeStamp zurück, das die Gesamtzeit in Millisekunden angibt, in der der Hauptthread daran gehindert wurde, auf hochpriorisierte Aufgaben zu reagieren, wie z.B. der Benutzer-Eingabe. Dies wird berechnet, indem alle langen Aufgaben innerhalb des LoAFs, die eine duration von mehr als 50ms haben, betrachtet werden, 50ms von jeder abgezogen werden, die Rendering-Zeit zur längsten Aufgabendauer hinzugefügt und die Ergebnisse summiert werden.

PerformanceLongAnimationFrameTiming.firstUIEventTimestamp Nur lesbar Experimentell

Gibt ein DOMHighResTimeStamp zurück, das die Zeit des ersten UI-Ereignisses angibt – wie z.B. ein Maus- oder Tastaturereignis –, das während des aktuellen Animationsrahmens in die Warteschlange gestellt wurde.

PerformanceLongAnimationFrameTiming.renderStart Nur lesbar Experimentell

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

PerformanceLongAnimationFrameTiming.scripts Nur lesbar Experimentell

Gibt ein Array von PerformanceScriptTiming Instanzen zurück.

PerformanceLongAnimationFrameTiming.styleAndLayoutStart Nur lesbar Experimentell

Gibt ein DOMHighResTimeStamp zurück, das den Beginn der Zeitspanne angibt, die für Stil- und Layoutberechnungen des aktuellen Animationsrahmens aufgewendet wird.

PerformanceLongAnimationFrameTiming.toJSON() Experimentell

Gibt eine JSON-Darstellung des PerformanceLongAnimationFrameTiming Objekts zurück.

Siehe Long animation frame timing für Beispiele zum Long Animation Frames API.

• Long animation frame timing
• PerformanceScriptTiming