PerformanceLongAnimationFrameTiming

Beschreibung

Lange Animations-Frames (LoAFs) sind Render-Aktualisierungen, die länger als 50 ms verzögert werden. LoAFs können zu langsamen Benutzeroberflächen-Updates führen, wodurch Bedienelemente träge erscheinen und ruckelige (nicht-glatte) Animationseffekte und Bildläufe entstehen. Dies führt oft zu Benutzerfrustration.

Das PerformanceLongAnimationFrameTiming-Interface bietet die folgende detaillierte Informationsmenge über LoAFs, die es Entwicklern ermöglicht, ihre Ursachen einzugrenzen:

• Eine detaillierte Reihe von Zeitstempeln für jeden 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 Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die Gesamtzeit in Millisekunden angibt, in der der Hauptthread daran gehindert wurde, auf hochpriorisierte Aufgaben wie Benutzereingaben zu reagieren. Dies wird berechnet, indem alle long tasks innerhalb des LoAFs mit einer duration von mehr als 50ms erfasst, 50ms von jedem abgezogen, die Renderzeit zur längsten Aufgabenzeit hinzugefügt und die Ergebnisse summiert werden.

PerformanceLongAnimationFrameTiming.firstUIEventTimestamp Schreibgeschützt Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die Zeit des ersten UI-Ereignisses — wie ein Maus- oder Tastaturereignis — angibt, das in der aktuellen Animations-Frame-Warteschlange eingereiht wurde.

PerformanceLongAnimationFrameTiming.paintTime

Gibt den timestamp zurück, als die Renderphase endete und der Animations-Frame startete.

PerformanceLongAnimationFrameTiming.presentationTime

Gibt den timestamp zurück, als die Benutzeroberflächen-Aktualisierung tatsächlich auf dem Bildschirm gezeichnet wurde.

PerformanceLongAnimationFrameTiming.renderStart Schreibgeschützt Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die Startzeit des Renderzyklus angibt, welcher Window.requestAnimationFrame()-Rückrufe, Stil- und Layoutberechnung, ResizeObserver-Rückrufe und IntersectionObserver-Rückrufe einschließt.

PerformanceLongAnimationFrameTiming.scripts Schreibgeschützt Experimentell

Gibt ein Array von PerformanceScriptTiming-Instanzen zurück.

PerformanceLongAnimationFrameTiming.styleAndLayoutStart Schreibgeschützt Experimentell

Gibt einen DOMHighResTimeStamp zurück, der den Beginn der Zeit in Stil- und Layoutberechnungen für den aktuellen Animations-Frame angibt.

Es erweitert auch die folgenden PerformanceEntry-Eigenschaften und qualifiziert und beschränkt sie wie beschrieben:

PerformanceEntry.duration Schreibgeschützt Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die in Millisekunden gemessene Zeit zur vollständigen Verarbeitung des LoAFs angibt.

PerformanceEntry.entryType Schreibgeschützt Experimentell

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

PerformanceEntry.name Schreibgeschützt Experimentell

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

PerformanceEntry.startTime Schreibgeschützt Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die Zeit angibt, zu der der Animations-Frame begann.

Instanz-Methoden

PerformanceLongAnimationFrameTiming.toJSON() Experimentell

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

Beispiele

Siehe Long animation frame timing für Beispiele im Zusammenhang mit dem Long Animation Frames API.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Long animation frame timing
• PerformanceScriptTiming