共计 757 个字符，预计需要花费 2 分钟才能阅读完成。
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 值，进而优化页面的稳定性。