LayoutShift: toJSON() 方法

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

LayoutShift 接口的 toJSON() 方法是一个序列化器；它返回 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()。

规范

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

浏览器兼容性

另见

JSON

帮助改进 MDN

了解如何贡献

此页面最后修改于 2023年4月7日，作者是 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的某个问题