web api interface
PerformanceLongAnimationFrameTiming
Limited availability
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:
- A detailed set of timestamps for each LoAF.
- Detailed information on each script that contributed to creating the LoAF, via the
scriptsproperty. This returns an array ofPerformanceScriptTimingobjects, one for each script.
PerformanceLongAnimationFrameTiming inherits from PerformanceEntry.
Instance properties
This interface directly defines the following properties:
blockingDurationRead only Experimental- : Returns 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 the long tasks within the LoAF that have adurationof more than50ms, subtracting50msfrom each, adding the rendering time to the longest task time, and summing the results.
- : Returns a
firstUIEventTimestampRead only Experimental- : Returns a
DOMHighResTimeStampindicating the time of the first UI event — such as a mouse or keyboard event — to be queued during the current animation frame.
- : Returns a
paintTimeExperimental- : Returns the
timestampwhen the rendering phase ended and the animation frame started.
- : Returns the
presentationTimeExperimental- : Returns the
timestampwhen the UI update was actually drawn on the screen.
- : Returns the
renderStartRead only Experimental- : Returns a
DOMHighResTimeStampindicating the start time of the rendering cycle, which includesrequestAnimationFrame()callbacks, style and layout calculation,ResizeObservercallbacks, andIntersectionObservercallbacks.
- : Returns a
scriptsRead only Experimental- : Returns an array of
PerformanceScriptTiminginstances.
- : Returns an array of
styleAndLayoutStartRead only Experimental- : Returns a
DOMHighResTimeStampindicating the beginning of the time period spent in style and layout calculations for the current animation frame.
- : Returns a
It also extends the following PerformanceEntry properties, qualifying and constraining them as described:
durationRead only Experimental- : Returns a
DOMHighResTimeStamprepresenting the time taken in milliseconds to process the LoAF in its entirety.
- : Returns a
entryTypeRead only Experimental- : Returns the entry type, which is always
"long-animation-frame".
- : Returns the entry type, which is always
nameRead only Experimental- : Returns the entry name, which is always
"long-animation-frame".
- : Returns the entry name, which is always
startTimeRead only Experimental- : Returns a
DOMHighResTimeStamprepresenting the time when the animation frame started.
- : Returns a
Instance methods
toJSON()Experimental- : Returns a JSON representation of the
PerformanceLongAnimationFrameTimingobject.
- : Returns a JSON representation of the
Examples
See Long animation frame timing for examples related to the Long Animation Frames API.