Chrome 開發者工具 performance 面板 Experience 中的 Layout shift（佈局位移）是指在頁面加載過程中元素的位置發生了意外的變化，這種變化可能會導致用戶的不良體驗，例如元素突然移動導致用戶誤點擊其他鏈接或按鈕。
Layout shift 主要由於以下原因引起：
- 圖片或其他資源的加載導致頁面佈局發生變化；
- 元素尺寸或字體加載延遲，導致渲染時出現了佈局變化；
- 動態添加的內容導致頁面佈局發生變化。
Layout shift 可以通過在頁面加載過程中保持元素尺寸的一致性和使用佔位符來減少。在 Chrome 開發者工具中，可以使用 Performance 面板的 Experience 選項卡來檢查頁面中的 Layout shift 情況，並查看與其相關的性能指標，如 Cumulative Layout Shift (CLS) 等。
什麼是 Cumulative Layout Shift ？
Cumulative Layout Shift (CLS) 是衡量頁面穩定性的一個指標，用於衡量頁面在加載過程中出現的所有佈局位移的累積值。CLS 值越小，表示頁面加載過程中的佈局位移越少，用戶體驗越好。
CLS 值的計算方法是在整個頁面生命週期內監測所有的佈局位移，並將位移的面積乘以位移的時間，然後將所有的位移面積乘以位移時間之和累加起來，最終得到一個總的 CLS 值。
在實際開發中，可以通過以下方式來減少頁面的 CLS 值：
- 在頁面加載過程中，儘可能保持元素的尺寸和位置不變；
- 在圖片和其他資源加載之前，使用佔位符來預留元素的位置；
- 避免動態添加內容，儘可能將所有的內容都包含在 HTML 中；
- 避免使用定位和動畫等可能導致佈局位移的 CSS 屬性。
在 Chrome 開發者工具的 Performance 面板中，可以通過查看 Experience 選項卡來查看頁面的 CLS 值，進而優化頁面的穩定性。