PerformanceLongAnimationFrameTiming: toJSON() method
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 toJSON()
method of the PerformanceLongAnimationFrameTiming
interface is a serializer; it returns a JSON representation of the PerformanceLongAnimationFrameTiming
object.
Syntax
toJSON()
Parameters
None.
Return value
A JSON
object that is the serialization of the PerformanceLongAnimationFrameTiming
object.
Examples
Using the toJSON
method
In this example, calling entry.toJSON()
returns a JSON representation of the PerformanceLongAnimationFrameTiming
object.
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(entry.toJSON());
});
});
observer.observe({ type: "long-animation-frame", buffered: true });
This would log a JSON object like so:
{
"blockingDuration": 0,
"duration": 60,
"entryType": "long-animation-frame",
"firstUIEventTimestamp": 11801.099999999627,
"name": "long-animation-frame",
"renderStart": 11858.800000000745,
"scripts": [
{
"duration": 45,
"entryType": "script",
"executionStart": 11803.199999999255,
"forcedStyleAndLayoutDuration": 0,
"invoker": "DOMWindow.onclick",
"invokerType": "event-listener",
"name": "script",
"pauseDuration": 0,
"sourceURL": "https://web.dev/js/index-ffde4443.js",
"sourceFunctionName": "myClickHandler",
"sourceCharPosition": 17796,
"startTime": 11803.199999999255,
"window": [Window object],
"windowAttribution": "self"
}
],
"startTime": 11802.400000000373,
"styleAndLayoutStart": 11858.800000000745
}
To get a JSON string, you can use JSON.stringify(entry)
directly; it will call toJSON()
automatically.
Specifications
Specification |
---|
Long Animation Frames API # dom-performancelonganimationframetiming-tojson |
Browser compatibility
BCD tables only load in the browser