什么是 CLS
CLS，即Cumulative Layout Shift 累积布局偏移
CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。
每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移 。（有关单次布局偏移分数计算方式的详细信息，请参阅下文。）
一连串的布局偏移，也叫会话窗口，是指一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1 秒，且整个窗口的最大持续时长为 5 秒。
最常见的影响CLS的分数的有：
未指定尺寸的图片
未指定尺寸的广告、嵌入元素、iframe
动态插入内容
自定义字体（引发FOIT/FOUT）
在更新DOM之前等待网络响应的操作
CLS问题有哪些影响
在网上阅读一篇文章时，结果页面上的某些内容突然发生改变。
文本在毫无预警的情况下移位，导致您找不到先前阅读的位置。
或者更糟糕：正要点击一个链接或一个按钮，但在鼠标点击的瞬间，链接移位了，结果点到了别的东西！
各搜索引擎对此类问题是比较反感的，具体表现的负面作用，就是严重影响网页权重和搜索引擎收录。
如何优化CLS
可以通过遵循一些指导原则来避免所有的意外布局偏移：
1、始终在您的图像和视频元素上包含尺寸属性，或者通过使用CSS 长宽比容器之类的方式预留所需的空间。
2、可以使用unsized-media 功能策略在支持功能策略的浏览器中强制执行此行为。
3、除非是对用户交互做出响应，否则切勿在现有内容的上方插入内容。这样能够确保发生的任何布局偏移都在预期之内。
4、首选转换动画，而不是触发布局偏移的属性动画。动画过渡的目标是提供状态与状态之间的上下文连续性。
