累计布局偏移（CLS）是一个稳定的Core Web Vitals指标。CLS作为一项以用户为中心的重要指标，用于衡量网页的视觉稳定性，因为它有助于量化用户遇到意外布局偏移的频率。CLS越低，网页的视觉体验越好，有助于确保用户在浏览时获得令人愉悦的体验。
什么是CLS
CLS（Cumulative Layout Shift）用于衡量网页在整个生命周期内，所有意外布局偏移的累计得分中的最高分数。每当可见元素在一个渲染帧到下一个渲染帧之间发生位置改变时，就会产生布局偏移。
CLS得分如何计算？
为了计算布局偏移得分，浏览器将分析视口中两个渲染帧之间不稳定元素的大小和移动情况。布局偏移得分是该移动元素的两个测量值的乘积：影响分数和距离分数。
layout shift score = impact fraction * distance fraction影响分数
影响分数用于衡量不稳定元素对两个帧之间的视口区域的影响。指定帧的影响比例是该帧和上一帧中所有不稳定元素的可见区域的总和，表示为相对于视口总面积的比例。
在上图中，有一个元素在一帧中占据了视口的一半。在下一帧中，该元素将视口高度向下移动25%。红色虚线矩形表示该元素在两个帧中的可见区域的联合。在本例中，该区域占整个视口的75%，因此其影响百分比为0.75。
距离分数
布局偏移得分公式的另一部分用于评估不稳定元素相对于视口移动的距离。距离分数是指任何不稳定元素在帧中移动的最大水平或垂直距离，除以视口的最大尺寸（以宽度或高度中较大者为准）。
在前面的示例中，最大视口尺寸为高度，且不稳定元素已移动视口高度的25%，这将导致距离比例为0.25。
因此，在此示例中，影响分数为0.75，距离分数为0.25，由此可得布局偏移得分为0.75 * 0.25 = 0.1875。
CLS得分参考值
为了提供良好的用户体验，网站应尽量将CLS值控制在0.1或更短的时间内。具体而言，CLS值小于0.1被视为优秀，而大于0.25则被认为是糟糕的表现。为有效评估大多数用户是否能够达到该目标，一个合适的衡量阈值是网页加载时间的第75个百分位数。
如何获取CLS
在JavaScript中，我们使用Layout Instability API来衡量布局偏移。 以下示例展示了如何创建 PerformanceObserver以将layout-shift条目记录到控制台：
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});在大多数情况下，网页卸载时的当前CLS值可以视为该网页的最终CLS值，但也存在一些重要的例外情况，参考指标与API之间的差异。这些情况均已在插件实现中充分考虑。
注意：在某些情况下（例如跨源 iframe），无法在JavaScript中衡量CLS。如需了解详情，请参阅web-vitals库的限制部分。