谷歌提出的CLS是什么意思

谷歌提出的CLS全称是Cumulative Layout Shift，中文意思是累计布局偏移。

CLS是谷歌Google提出的一项非常重要的网页性能指标，以用户为中心的内容视觉稳定性指标，因为它有助于量化用户体验到意外布局移位的频率，较低的CLS有助于确保页面用户视觉和交互体验。

当用户浏览一个页面的时候，若是想要点击一个按钮或者其他交互时，页面的布局突然出然抖动，可以会造成用户的交互行为造成期望之外的结果。页面内容的意外移动通常发生在资源异步加载或DOM元素被动态添加到现有内容之上的页面上。罪魁祸首可能是尺寸未知的图像或视频、显示大于或小于回退的字体、或动态调整自身大小的第三方广告或小部件。

比如常见的首页轮播banner图，当图片资源加载缓慢的时候，并不影响浏览器解析DOM、CSS合成Layout Tree等操作，当页面整体渲染完成之后图片突然加载完成并渲染到页面上，便会造成严重的CLS。