页面视觉稳定性之CLS

你是否曾经在线读一篇文章的时候，页面上突然发生了一些改变？没有任何警告，文字移动了，你不知道读到那里了。或者更糟糕的，你准备点一个链接或者按钮，但就在你手指触摸到屏幕的前一秒，链接移动了，你点到了其他地方。

大部分情况，这些体验只会引起你的反感，但有时候，会对你造成无法挽回的伤害。

如上图，当你想要点击灰色按钮的时候，突然出现了一个提示，你将点击到蓝色按钮。

预料之外的页面内容的移动经常发生，因为资源的异步加载，或者dom元素的动态添加。罪魁祸首有可能是未知尺寸的图片或者视频，或者字体文件（比默认字体大或者小），亦或是第三方广告或者挂件（会自动改变大小）。

CLS(Cumulative Layout Shift) 的性能指标可以帮你定位这些问题，通过测试真实用户这些问题发生的频率。

什么是CLS？

CLS 是所有布局偏移分数的汇总，凡是在页面完整生命周期内预料之外的布局偏移都包括。

布局偏移发生在任意时间，当一个可见元素改变了它的位置，从一个渲染帧到下一个。