布局偏移：toJSON() 方法

实验性： 这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

toJSON() 是LayoutShift 接口的序列化器；它返回LayoutShift 对象的 JSON 表示形式。

语法

toJSON()

参数

无。

返回值

一个JSON 对象，它是LayoutShift 对象的序列化形式。

示例

使用 toJSON 方法

在此示例中，调用 entry.toJSON() 将返回 LayoutShift 对象的 JSON 表示形式。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "layout-shift", buffered: true });

这将记录一个这样的 JSON 对象

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
      }
    }
  ]
}

要获得 JSON 字符串，可以直接使用JSON.stringify(entry)；它会自动调用 toJSON()。

规范

规范
布局不稳定性 # dom-layoutshift-tojson

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

JSON