PerformanceLongAnimationFrameTiming
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
ThePerformanceLongAnimationFrameTiming interface is specified in the Long Animation Frames API and provides metrics on long animation frames (LoAFs) that occupy rendering and block other tasks from being executed.
Description
Long animation frames (LoAFs) are rendering updates that are delayed beyond 50ms. LoAFs can result in slow user interface (UI) updates, making controls appear unresponsive and causingjanky (non-smooth) animated effects and scrolling. This often leads to user frustration.
ThePerformanceLongAnimationFrameTiming interface provides the following granular set of information on LoAFs, allowing developers to narrow down their root causes:
- A detailed set of timestamps for each LoAF.
- Detailed information on each script that contributed to creating the LoAF, via the
PerformanceLongAnimationFrameTiming.scriptsproperty. This returns an array ofPerformanceScriptTimingobjects, one for each script.
PerformanceLongAnimationFrameTiming inherits fromPerformanceEntry.
Instance properties
This interface extends the followingPerformanceEntry properties for long animation frame performance entries:
PerformanceEntry.durationRead onlyExperimentalReturns a
DOMHighResTimeStamprepresenting the time taken in milliseconds to process the LoAF in its entirety.PerformanceEntry.entryTypeRead onlyExperimentalReturns the entry type, which is always
"long-animation-frame".PerformanceEntry.nameRead onlyExperimentalReturns the entry name, which is always
"long-animation-frame".PerformanceEntry.startTimeRead onlyExperimentalReturns a
DOMHighResTimeStamprepresenting the time when the animation frame started.
This interface also supports the following properties:
PerformanceLongAnimationFrameTiming.blockingDurationRead onlyExperimentalReturns a
DOMHighResTimeStampindicating the total time in milliseconds that the main thread was blocked from responding to high priority tasks, such as user input. This is calculated by taking all thelong tasks within the LoAF that have adurationof more than50ms, subtracting50msfrom each, adding the rendering time to the longest task time, and summing the results.PerformanceLongAnimationFrameTiming.firstUIEventTimestampRead onlyExperimentalReturns a
DOMHighResTimeStampindicating the time of the first UI event — such as a mouse or keyboard event — to be queued during the current animation frame.PerformanceLongAnimationFrameTiming.renderStartRead onlyExperimentalReturns a
DOMHighResTimeStampindicating the start time of the rendering cycle, which includesWindow.requestAnimationFrame()callbacks, style and layout calculation,ResizeObservercallbacks, andIntersectionObservercallbacks.PerformanceLongAnimationFrameTiming.scriptsRead onlyExperimentalReturns an array of
PerformanceScriptTiminginstances.PerformanceLongAnimationFrameTiming.styleAndLayoutStartRead onlyExperimentalReturns a
DOMHighResTimeStampindicating the beginning of the time period spent in style and layout calculations for the current animation frame.
Instance methods
PerformanceLongAnimationFrameTiming.toJSON()ExperimentalReturns a JSON representation of the
PerformanceLongAnimationFrameTimingobject.
Examples
SeeLong animation frame timing for examples related to the Long Animation Frames API.
Specifications
| Specification |
|---|
| Long Animation Frames API # sec-PerformanceLongAnimationFrameTiming |