LayoutShift: toJSON() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more support for this feature? Tell us why.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The toJSON() method of the LayoutShift interface is a serializer; it returns a JSON representation of the LayoutShift object.
Syntax
toJSON()
Parameters
None.
Return value
A JSON object that is the serialization of the LayoutShift object.
Examples
Using the toJSON method
In this example, calling entry.toJSON() returns a JSON representation of the LayoutShift object.
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(entry.toJSON());
});
});
observer.observe({ type: "layout-shift", buffered: true });
This would log a JSON object like so:
{
"name": "",
"entryType": "layout-shift",
"startTime": 246.39999999850988,
"duration": 0,
"value": 0.0071167845054842215,
"hadRecentInput": false,
"lastInputTime": 0,
"sources": [
{
"previousRect": {
"x": 917,
"y": 708,
"width": 706,
"height": 248,
"top": 708,
"right": 1623,
"bottom": 956,
"left": 917
},
"currentRect": {
"x": 693,
"y": 708,
"width": 1154,
"height": 472,
"top": 708,
"right": 1847,
"bottom": 1180,
"left": 693
}
}
]
}
To get a JSON string, you can use JSON.stringify(entry) directly; it will call toJSON() automatically.
Specifications
| Specification |
|---|
| Layout Instability API # dom-layoutshift-tojson |
Browser compatibility
Enable JavaScript to view this browser compatibility table.