PerformanceLongAnimationFrameTiming

Beschreibung

Lange Animationsframes (LoAFs) sind Aktualisierungen der Darstellung, die sich um mehr als 50 ms verzögern. LoAFs können dazu führen, dass Aktualisierungen der Benutzeroberfläche (UI) langsam erfolgen, Bedienelemente nicht zu reagieren scheinen und Animationen sowie Scrollvorgänge ruckeln. Dies führt häufig zu Frustration bei Nutzern.

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

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

PerformanceLongAnimationFrameTiming erbt von PerformanceEntry.

Instanzeigenschaften

Dieses Interface definiert die folgenden Eigenschaften direkt:

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. Dazu werden alle Long Tasks innerhalb des LoAF mit einer duration von mehr als 50ms herangezogen, von jedem 50ms abgezogen, die Darstellungszeit zur Dauer der längsten Aufgabe addiert und die Ergebnisse summiert.

PerformanceLongAnimationFrameTiming.firstUIEventTimestamp Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt des ersten UI-Ereignisses angibt – etwa eines Maus- oder Tastaturereignisses –, das während des aktuellen Animationsframes in die Warteschlange gestellt wurde.

PerformanceLongAnimationFrameTiming.paintTime Schreibgeschützt

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

PerformanceLongAnimationFrameTiming.presentationTime Schreibgeschützt

Gibt den Zeitstempel zurück, zu dem die Aktualisierung der Benutzeroberfläche tatsächlich auf dem Bildschirm dargestellt wurde.

PerformanceLongAnimationFrameTiming.renderStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Beginn des Darstellungszyklus angibt. Dieser umfasst Callbacks von Window.requestAnimationFrame(), Berechnungen von Style und Layout sowie Callbacks von ResizeObserver und IntersectionObserver.

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, der für Style- und Layoutberechnungen des aktuellen Animationsframes aufgewendet wurde.

Darüber hinaus erweitert es die folgenden Eigenschaften von PerformanceEntry und präzisiert beziehungsweise beschränkt sie wie beschrieben:

PerformanceEntry.duration Schreibgeschützt

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

PerformanceEntry.entryType Schreibgeschützt

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

PerformanceEntry.name Schreibgeschützt

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

PerformanceEntry.startTime Schreibgeschützt

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

Instanzmethoden

PerformanceLongAnimationFrameTiming.toJSON()

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

Beispiele

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Zeitmessung langer Animationsframes
• PerformanceScriptTiming