PerformanceLongAnimationFrameTiming

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The PerformanceLongAnimationFrameTiming 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 causing janky (non-smooth) animated effects and scrolling. This often leads to user frustration.

The PerformanceLongAnimationFrameTiming interface provides the following granular set of information on LoAFs, allowing developers to narrow down their root causes:

PerformanceLongAnimationFrameTiming inherits from PerformanceEntry.

PerformanceEntry PerformanceLongAnimationFrameTiming

Instance properties

This interface extends the following PerformanceEntry properties for long animation frame performance entries:

PerformanceEntry.duration Read only Experimental

Returns a DOMHighResTimeStamp representing the time taken in milliseconds to process the LoAF in its entirety.

PerformanceEntry.entryType Read only Experimental

Returns the entry type, which is always "long-animation-frame".

PerformanceEntry.name Read only Experimental

Returns the entry name, which is always "long-animation-frame".

PerformanceEntry.startTime Read only Experimental

Returns a DOMHighResTimeStamp representing the time when the animation frame started.

This interface also supports the following properties:

PerformanceLongAnimationFrameTiming.blockingDuration Read only Experimental

Returns a DOMHighResTimeStamp indicating 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 the long tasks within the LoAF that have a duration of more than 50ms, subtracting 50ms from each, adding the rendering time to the longest task time, and summing the results.

PerformanceLongAnimationFrameTiming.firstUIEventTimestamp Read only Experimental

Returns a DOMHighResTimeStamp indicating the time of the first UI event — such as a mouse or keyboard event — to be queued during the current animation frame.

PerformanceLongAnimationFrameTiming.renderStart Read only Experimental

Returns a DOMHighResTimeStamp indicating the start time of the rendering cycle, which includes Window.requestAnimationFrame() callbacks, style and layout calculation, ResizeObserver callbacks, and IntersectionObserver callbacks.

PerformanceLongAnimationFrameTiming.scripts Read only Experimental

Returns an array of PerformanceScriptTiming instances.

PerformanceLongAnimationFrameTiming.styleAndLayoutStart Read only Experimental

Returns a DOMHighResTimeStamp indicating the beginning of the time period spent in style and layout calculations for the current animation frame.

Instance methods

PerformanceLongAnimationFrameTiming.toJSON() Experimental

Returns a JSON representation of the PerformanceLongAnimationFrameTiming object.

Examples

See Long animation frame timing for examples related to the Long Animation Frames API.

Specifications

Specification
Long Animation Frames API
# sec-PerformanceLongAnimationFrameTiming

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PerformanceLongAnimationFrameTiming
Experimental
blockingDuration
Experimental
firstUIEventTimestamp
Experimental
renderStart
Experimental
scripts
Experimental
styleAndLayoutStart
Experimental
toJSON
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also