CumulativeLayoutShift(CLS)是衡量用户视觉稳定性的一个重要的以用户为中心的指标，因为它有助于量化当用户打开页面时页面布局如何变化的频率。目前官方建议这个指标应该小于0.1。这样的CLS将有助于确保页面的用户体验。想象一下您想要单击链接或按钮的场景，但在您的手指落下(BOOM)的瞬间，链接移动并且您最终单击了其他内容！这不是很糟糕的经历吗？举个例子：由于异步加载资源或在现有内容之上向页面动态添加DOM元素，页面布局经常发生变化。罪魁祸首可能是未知大小的图片或视频，或者动态调整自身大小的第三方广告或小部件等。解决这个问题的难点在于开发中的网站功能往往与用户体验大不相同.个性化或第三方内容在开发环境和生产环境中的行为不同。开发时的图片等资源通常已经存在于开发者的浏览器缓存中，本地API调用通常很快，所以延迟不明显。但是，CumulativeLayoutShift(CLS)指标可以通过测量实际用户更改的频率来帮助您发现此类问题。什么是CLS？CLS是衡量页面整个生命周期中发生的每个元素布局更改的分数总和。布局移动由LayoutInstabilityAPI定义，该API将视口中可见的元素定义为在渲染帧之间更改其起始位置时不稳定。请注意，仅当现有元素更改其起始位置时才会发生布局偏移。如果将新元素添加到DOM或现有元素更改大小，只要更改不会导致其他可见元素更改其起始位置，该元素就不算作布局偏移。什么是好的CLS分数？为了提供良好的用户体验，网站应努力使CLS分数不超过0.1。为确保大多数用户达到此目标，您可以将75%的页面分数在移动和桌面设备上作为基本标准通过。要了解有关此建议背后的研究和方法的更多信息，请参阅：DefiningCoreWebVitals(web.dev/defining-co...帧之间视口中的不稳定元素。布局偏移分数是该运动的两个度量的乘积：影响分数和距离分数。layoutshiftscore=impactfraction*distancefractionimpactfractionimpactfraction衡量在两个渲染帧之间移动元素对页面视口的影响。前一帧和当前帧中所有不稳定元素的可见区域的并集（作为视口总面积的一部分）是当前帧的影响分数。在上图中，有一个元素在一帧中占据了视口的一半。然后，在下一帧，元素向下移动视口高度的25%。红色虚线矩形表示元素在两帧中可见区域的并集，在本例中为总视口的75%，因此其影响分数为0.75。距离分数距离分数是不稳定元素在视口中移动的最大距离（水平或垂直）除以视口的最大尺寸（宽度或高度，以较大者为准）。在上面的示例中，最大视口尺寸为高度，不稳定元素移动了视口高度的25%，这使得距离得分为0.25。因此，在此示例中，影响得分为0.75，距离得分为0.25，因此布局偏移得分为0.75*0.25=0.1875。向现有元素添加内容如何影响布局移动分数按钮被添加到带有黑色文本的灰色框的底部，这会将带有白色文本的绿色框向下推（并且部分超出视口）。在这个例子中，灰色框改变了大小，但它的起始位置没有改变，所以它不是一个不稳定的元素。该按钮之前不在DOM中，因此它的起始位置不会改变。然而，绿色方块的起始位置确实发生了变化，但由于它已部分移出视口，因此在计算影响分数时不考虑不可见区域。两帧中绿色框的可视区域（由红色虚线矩形表示）的并集与第一帧中绿色框在视口50%处的面积相同。影响分数为0.5。距离分数由紫色箭头表示。绿色框向下移动了大约14%的视口，因此距离得分为0.14。布局位移得分为0.5x0.14=0.07。多个不稳定元素在上面的第一帧中，有四个API请求的动物结果，按字母顺序排序。在第二帧中，更多结果被添加到排序列表中。列表中的第一项（“Cat”）不会改变帧之间的起始位置，因此它是稳定的。同样，添加到列表中的新项目以前不在DOM中，因此它们的起始位置不会改变。但是标有“狗”、“马”和“斑马”的项目都改变了它们的起始位置，使它们成为不稳定的元素。红色虚线矩形再次表示三个不稳定元素的组合前后区域，在本例中约为视口区域的38%（影响比为0.38）。箭头指示不稳定元素从其起始位置移动了多远。由蓝色箭头表示的“斑马”元素移动最多，移动了视口高度的大约30%。此示例中的距离分数为0.3。布局位移分数为0.38x0.3=0.1172。预期与意外的布局变化并非所有的布局变化都是不好的。事实上，许多动态Web应用程序经常会更改元素在页面上的起始位置。布局更改只有在用户无意的情况下才是糟糕的。此外，响应用户交互（单击链接、按下按钮、在搜索框中键入等）而发生的布局更改通常没有问题，只要更改发生在用户可以清楚地看到的交互足够近的地方这种关系。动画和过渡是更新页面内容而不会让用户感到惊讶的好方法。突然移动页面上的内容几乎总是糟糕的用户体验。但是，从一个位置逐渐自然地移动到另一个位置的内容通常可以帮助用户更好地了解正在发生的事情。CSStransform属性允许您在不触发布局偏移的情况下为元素设置动画，例如使用transform:scale()而不是更改高度和宽度属性。要移动元素，请避免更改top、right、bottom或left属性，而是使用transform:translate()。如何测量CLS1，可以使用lighthouse和performce来检测CLS。2.手动测量可以使用布局不稳定性API。创建一个PerformanceObserver来监听意外的布局偏移元素，对它们求和，并将它们记录到控制台。letcls=0;newPerformanceObserver((entryList)=>{for(constentryofentryList.getEntries()){if(!entry.hadRecentInput){cls+=entry.value;console.log('CurrentCLSvalue:',cls,entry);}}}).observe({type:'layout-shift',buffered:true});如何提高CLS首先，最常见的影响CLS分数的是：未指定尺寸的图像未指定尺寸的广告、嵌入元素、iframe动态插入内容自定义字体（触发FOIT/FOUT）在更新DOM之前等待网络响应因此，改进方法是：一开始设置图片的大小，或者预留足够的空间。这确保浏览器在加载图像时可以在文档中分配正确的空间量。这种行为也可以在支持使用unsize-media属性策略的属性策略的浏览器中强制执行。除非响应用户交互，否则切勿在现有内容之上插入内容。这确保可以预期任何排版变化。优先转换动画属性而不是触发布局更改的动画属性。动画过渡以提供状态之间的上下文和连续性。尽早加载网页字体，避免FOIT和FOUT与UI同事合作，避免交互布局偏移注：本文大部分内容翻译自文章网页。.com/p/207163394web.dev/optimize-cl…developers.google.com/publisher-t…作者：winty链接：https://juejin.cn/post/6950609277165764644来源：掘金版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
