LayoutShift

描述

當任何在視口中可見的元素在兩個幀之間改變其位置時，就會發生布局偏移。這些元素被稱為不穩定，表明缺乏視覺穩定性。

佈局不穩定 API 提供了一種衡量和報告這些佈局偏移的方法。所有用於除錯佈局偏移的工具，包括瀏覽器開發者工具中的那些，都使用此 API。該 API 還可用於透過將資訊記錄到控制檯、將資料傳送到伺服器端點或傳送到網頁分析來觀察和除錯佈局偏移。

效能工具可以使用此 API 來計算 CLS 分數。

例項屬性

此介面透過以下方式擴充套件了以下 PerformanceEntry 屬性：

PerformanceEntry.duration 只讀 實驗性

始終返回 0（持續時間的概念不適用於佈局偏移）。

PerformanceEntry.entryType 只讀 實驗性

始終返回 "layout-shift"。

PerformanceEntry.name 只讀 實驗性

始終返回 "layout-shift"。

PerformanceEntry.startTime 只讀 實驗性

返回一個 DOMHighResTimeStamp，表示佈局偏移開始的時間。

此介面還支援以下屬性：

LayoutShift.value 實驗性

返回佈局偏移分數，計算方法是將影響分數（視口移動部分的比例）乘以距離分數（視口移動的距離比例）。

LayoutShift.hadRecentInput 實驗性

如果 lastInputTime 距離現在小於 500 毫秒，則返回 true。

LayoutShift.lastInputTime 實驗性

返回最近一次排除性輸入（將排除此條目作為 CLS 分數貢獻的使用者輸入）的時間，如果沒有發生排除性輸入，則返回 0。

LayoutShift.sources 實驗性

返回一個 LayoutShiftAttribution 物件陣列，其中包含有關已移動元素的詳細資訊。

例項方法

LayoutShift.toJSON() 實驗性

將屬性轉換為 JSON。

示例

記錄佈局偏移值

以下示例展示瞭如何捕獲佈局偏移並將其記錄到控制檯。

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Count layout shifts without recent user input only
    if (!entry.hadRecentInput) {
      console.log("LayoutShift value:", entry.value);
      if (entry.sources) {
        for (const { node, currentRect, previousRect } of entry.sources)
          console.log("LayoutShift source:", node, {
            currentRect,
            previousRect,
          });
      }
    }
  }
});

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

規範

瀏覽器相容性

另見

• LayoutShiftAttribution
• CLS