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 上檢視此頁面 • 報告此內容的某個問題