PerformanceLongAnimationFrameTiming

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

DiePerformanceLongAnimationFrameTiming Schnittstelle ist im Long Animation Frames API spezifiziert und liefert Metriken zu langen Animationsrahmen (LoAFs), die das Rendering einnehmen und andere Aufgaben blockieren, sodass diese nicht ausgeführt werden können.

Beschreibung

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 zuruckeligen (nicht sanften) Animationseffekten und Scrollen kommt. Dies führt oft zu Benutzerfrustration.

Die SchnittstellePerformanceLongAnimationFrameTiming 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 diePerformanceLongAnimationFrameTiming.scripts Eigenschaft. Diese gibt ein Array vonPerformanceScriptTiming Objekten zurück, eines für jedes Skript.

PerformanceLongAnimationFrameTiming erbt vonPerformanceEntry.

Instanz-Eigenschaften

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

PerformanceEntry.durationSchreibgeschütztExperimentell: Gibt ein DOMHighResTimeStamp zurück, das die benötigte Zeit in Millisekunden angibt, um das LoAF vollständig zu verarbeiten.
PerformanceEntry.entryTypeSchreibgeschütztExperimentell: Gibt den Eintragstyp zurück, der immer"long-animation-frame" ist.
PerformanceEntry.nameSchreibgeschütztExperimentell: Gibt den Eintragsnamen zurück, der immer"long-animation-frame" ist.
PerformanceEntry.startTimeSchreibgeschütztExperimentell: 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.blockingDurationSchreibgeschütztExperimentell: 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 allelangen Aufgaben innerhalb des LoAFs, die eineduration von mehr als50ms haben, betrachtet werden,50ms von jeder abgezogen werden, die Rendering-Zeit zur längsten Aufgabendauer hinzugefügt und die Ergebnisse summiert werden.
PerformanceLongAnimationFrameTiming.firstUIEventTimestampSchreibgeschütztExperimentell: 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.renderStartSchreibgeschütztExperimentell: Gibt ein DOMHighResTimeStamp zurück, das den Startzeitpunkt des Rendering-Zyklus angibt, derWindow.requestAnimationFrame() Rückrufe, Stil- und Layoutberechnungen,ResizeObserver Rückrufe undIntersectionObserver Rückrufe umfasst.
PerformanceLongAnimationFrameTiming.scriptsSchreibgeschütztExperimentell: Gibt ein Array von PerformanceScriptTiming Instanzen zurück.
PerformanceLongAnimationFrameTiming.styleAndLayoutStartSchreibgeschütztExperimentell: Gibt ein DOMHighResTimeStamp zurück, das den Beginn der Zeitspanne angibt, die für Stil- und Layoutberechnungen des aktuellen Animationsrahmens aufgewendet wird.