CLS（Cumulative Layout Shift）是用来衡量什么的指标？它如何定义偏移的连续累

CLS（Cumulative Layout Shift）是用来衡量视觉界面稳定性的一个指标，它指的是页面产生的连续累计布局偏移分数。CLS通过度量页面元素在加载过程中的位置变化来评估视觉稳定性。在定义偏移的连续累计时，CLS关注的是累计值最高的连续布局偏移，且这些偏移必须发生在相隔时间少于1秒的连续时间段内，同时整个窗口的最大持续时间为5秒，这样的偏移才会被计为连续偏移。

CLS 是用来衡量视觉界面稳定性的一个指标，指的是页面产生的连续累计布局偏移分数。我们在日常业务中经常会用到懒加载、骨架屏等方式，用较低的成本先展示页面框架，再用动态渲染的方式，来对页面内容进行填充，如果此时布局发生变化，比如动态加载的元素和原本占位的元素大小不一致，可能就会导致用户误操作，影响用户体验，CLS 就是为了度量这类问题而存在。

那么如何定义偏移的连续累计呢？有如下几个要素：

• CLS 计算的并非页面整个周期的偏移分数之和，而是累计值最高的连续布局偏移

• 偏移相隔的时间少于 1s，且整个窗口的最大持续时间为 5s，则被计为连续偏移

v

——参考链接。