LayoutShiftAttribution: toJSON() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser 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 LayoutShiftAttribution interface returns a JSON-serializable plain object representing the LayoutShiftAttribution object.
The method is automatically called by JSON.stringify() when a LayoutShiftAttribution object is encountered during JSON serialization.
Syntax
toJSON()
Parameters
None.
Return value
A JSON-serializable plain object containing the following properties:
Each property's value is copied as-is. When the returned object is passed to JSON.stringify(), the previousRect and currentRect properties are further serialized using DOMRectReadOnly.toJSON().
The returned object doesn't contain the node property because Node doesn't provide a toJSON() operation.
Examples
Calling toJSON() directly
This example obtains a LayoutShiftAttribution object. Calling toJSON() directly returns a plain object. Its properties have the same values as the corresponding properties of the original object.
new PerformanceObserver((list) => {
for (const { sources } of list.getEntries()) {
if (sources) {
const attribution = sources[0];
const json = attribution.toJSON();
console.log(json); // A plain object
console.log(typeof json); // "object"
console.log(json.previousRect.x); // Same value as attribution.previousRect.x
}
}
}).observe({ type: "layout-shift", buffered: true });
Serializing to a JSON string
Within the callback from the previous example, the same object can be serialized using JSON.stringify(), which calls the toJSON() method automatically.
console.log(JSON.stringify(attribution));
This would log a JSON string like so (formatted for readability):
{
"previousRect": {
"x": 917.25,
"y": 708.25,
"width": 706.5,
"height": 248.5,
"top": 708.25,
"right": 1623.75,
"bottom": 956.75,
"left": 917.25
},
"currentRect": {
"x": 693.25,
"y": 708.25,
"width": 1154.5,
"height": 472.5,
"top": 708.25,
"right": 1847.75,
"bottom": 1180.75,
"left": 693.25
}
}
Specifications
| Specification |
|---|
| Layout Instability API # sec-layout-shift-attribution |