LayoutShift: 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 LayoutShift interface is a serializer; it returns a JSON representation of the LayoutShift object.
Syntax
js
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.
js
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:
json
{ "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 |