什么是 Chrome 开发者工具 performance 面板 Experience 里的 Layout shift

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 值，进而优化页面的稳定性。