累計(jì)布局位移（CLS）是衡量用戶視覺穩(wěn)定性的一項(xiàng)重要的以用戶為中心的度量標(biāo)準(zhǔn)，因?yàn)樗兄诹炕脩舸蜷_頁(yè)面時(shí)，頁(yè)面布局變化的頻率。目前官方建議這個(gè)指標(biāo)應(yīng)該小于 0.1，這樣的 CLS 有助于確保頁(yè)面的用戶體驗(yàn)。

試想一下這樣的場(chǎng)景，你想要點(diǎn)擊一個(gè)鏈接或一個(gè)按鈕，但是在手指落下的瞬間（BOOM），鏈接移動(dòng)了，您最終點(diǎn)擊了其他東西！這樣的體驗(yàn)是不是糟糕透了？比如如下例子：

頁(yè)面布局的變動(dòng)通常是由于異步加載的資源或?qū)OM元素動(dòng)態(tài)添加到現(xiàn)有內(nèi)容上方的頁(yè)面而發(fā)生的。罪魁禍?zhǔn)卓赡苁浅叽缥粗膱D像或視頻，或者是動(dòng)態(tài)調(diào)整自身大小的第三方廣告或小部件等。

解決這個(gè)問(wèn)題的難點(diǎn)在于，網(wǎng)站在開發(fā)中的功能通常與用戶的體驗(yàn)有很大不同。個(gè)性化或第三方內(nèi)容在開發(fā)環(huán)境中和在生產(chǎn)中的表現(xiàn)不盡相同，開發(fā)時(shí)的圖片等資源通常已經(jīng)存在于開發(fā)者的瀏覽器緩存中，并且在本地的API調(diào)用通常很快，所以延遲不明顯。

而，累計(jì)布局位移（CLS）度量標(biāo)準(zhǔn)可通過(guò)測(cè)量實(shí)際用戶發(fā)生變化的頻率來(lái)幫助你發(fā)現(xiàn)這類問(wèn)題。

什么是CLS？

CLS是測(cè)量在頁(yè)面整個(gè)生命周期中發(fā)生的每個(gè)元素布局變化的分?jǐn)?shù)總和。

布局移動(dòng)由Layout Instability API定義，該API定義在視口中可見的元素在兩渲染幀之間更改其開始位置時(shí)，這些元素被認(rèn)為是不穩(wěn)定元素。

請(qǐng)注意，僅當(dāng)現(xiàn)有元素更改其起始位置時(shí)，才會(huì)發(fā)生布局移動(dòng)。如果將新元素添加到DOM或現(xiàn)有元素更改了大小，則只要更改不會(huì)導(dǎo)致其他可見元素更改其開始位置，該元素就不會(huì)算作布局偏移。

良好的CLS分?jǐn)?shù)是多少？

為了提供良好的用戶體驗(yàn)，網(wǎng)站應(yīng)努力使CLS得分不超過(guò)0.1。為確保大多數(shù)用戶達(dá)到這一目標(biāo)，可以用移動(dòng)設(shè)備和臺(tái)式機(jī)設(shè)備有75%的頁(yè)面得分符合要求即為合格作為基本標(biāo)準(zhǔn)。

要了解有關(guān)此建議背后的研究和方法的更多信息，請(qǐng)參閱：定義核心Web Vitals(https://web.dev/defining-core-web-vitals-thresholds/)指標(biāo)閾值

影響分?jǐn)?shù)

要計(jì)算布局變化分?jǐn)?shù)，瀏覽器將查看視口大小以及兩個(gè)渲染幀之間視口中不穩(wěn)定元素的移動(dòng)。布局偏移分?jǐn)?shù)是該運(yùn)動(dòng)的兩個(gè)度量的乘積：沖擊分?jǐn)?shù)和距離分?jǐn)?shù)。

 layout shift score = impact fraction * distance fraction

沖擊分?jǐn)?shù)

沖擊分?jǐn)?shù)衡量的是變動(dòng)元素在兩渲染幀之間對(duì)頁(yè)面視口的影響。前一幀和當(dāng)前幀的所有不穩(wěn)定元素的可見區(qū)域的并集（作為視口總面積的一部分）是當(dāng)前幀的影響分?jǐn)?shù)。 

在上圖中，有一個(gè)元素在一幀中占據(jù)了視口的一半。然后，在下一幀中，元素下移視口高度的25％。紅色的虛線矩形表示兩個(gè)幀中元素的可見區(qū)域的并集，在這種情況下，其為總視口的75％，因此其影響分?jǐn)?shù)為0.75。

距離分?jǐn)?shù)距離分?jǐn)?shù)是不穩(wěn)定元素在視口中移動(dòng)的最大距離(水平或垂直)除以視口的最大尺寸(寬度或高度，取較大的)。

在上面的例子中，最大的視口尺寸是高度，不穩(wěn)定元素移動(dòng)了視口高度的25%，這使得距離分?jǐn)?shù)為0.25。

所以，在這個(gè)例子中，影響分?jǐn)?shù)是0.75，距離分?jǐn)?shù)是0.25，所以布局移位分?jǐn)?shù)是0.75 * 0.25 = 0.1875。

向現(xiàn)有元素添加內(nèi)容如何影響布局移位分?jǐn)?shù)

圖中"Click Me!"按鈕被添加到帶有黑色文本的灰色框的底部，它將帶有白色文本的綠色框向下推(并部分推出視口)。

在這個(gè)例子中，灰色框改變了大小，但是它的起始位置沒有改變，所以它不是一個(gè)不穩(wěn)定的元素。按鈕以前并不在DOM中，因此它的起始位置也不會(huì)改變。

然而，綠色方塊的起始位置確實(shí)會(huì)發(fā)生變化，但由于它已經(jīng)部分移出了視口，所以在計(jì)算沖擊分?jǐn)?shù)時(shí)，不可見區(qū)域并不會(huì)被考慮在內(nèi)。兩個(gè)幀中綠色框的可視區(qū)域(用紅色虛線矩形表示)的聯(lián)合與第一個(gè)幀中50%視口的綠色框的區(qū)域相同。沖擊分?jǐn)?shù)為0.5。

距離分?jǐn)?shù)用紫色箭頭表示。綠框已經(jīng)向下移動(dòng)了大約14%的視口，所以距離分?jǐn)?shù)是0.14。

布局位移得分為0.5 x 0.14 = 0.07。

多個(gè)不穩(wěn)定元素

在上面的第一幀中，有一個(gè)動(dòng)物的API請(qǐng)求的四個(gè)結(jié)果，按字母順序排序。在第二幀中，更多的結(jié)果被添加到排序列表中。

列表中的第一項(xiàng)("Cat")不會(huì)在幀之間改變它的起始位置，所以它是穩(wěn)定的。類似地，添加到列表中的新項(xiàng)以前并不在DOM中，因此它們的起始位置也不會(huì)改變。但標(biāo)有"狗"、"馬"和"斑馬"的物品都改變了它們的起始位置，使它們成為不穩(wěn)定的元素。

紅色的虛線矩形再次代表這三個(gè)不穩(wěn)定元素的前后區(qū)域的結(jié)合，在這個(gè)例子中大約是視口區(qū)域的38%(撞擊率為0.38)。

箭頭表示不穩(wěn)定元素從起始位置移動(dòng)的距離。用藍(lán)色箭頭表示的"斑馬"元素移動(dòng)得最多，移動(dòng)了視口高度的30%左右。這個(gè)例子中的距離分?jǐn)?shù)是0.3。

布局位移分?jǐn)?shù)是0.38 x 0.3 = 0.1172。

預(yù)期 VS 意外的布局變化

并不是所有的布局變化都是不好的。事實(shí)上，許多動(dòng)態(tài)web應(yīng)用程序經(jīng)常改變頁(yè)面上元素的起始位置。

只有在用戶非預(yù)期的情況下，布局的改變才是糟糕的。另外，在響應(yīng)用戶交互時(shí)(點(diǎn)擊一個(gè)鏈接，按下一個(gè)按鈕，輸入一個(gè)搜索框等等)出現(xiàn)的布局變化通常是好的，只要這種變化發(fā)生在距離交互足夠近的地方，用戶能夠清楚地看到這種關(guān)系。

動(dòng)畫和過(guò)渡是更新頁(yè)面內(nèi)容的好方法，不會(huì)讓用戶感到意外。頁(yè)面上突然移動(dòng)內(nèi)容幾乎總是會(huì)造成糟糕的用戶體驗(yàn)。但是，從一個(gè)位置逐漸自然地移動(dòng)到另一個(gè)位置的內(nèi)容通常可以幫助用戶更好地理解發(fā)生了什么。

CSS transform屬性允許你在不觸發(fā)布局移位的情況下動(dòng)畫元素，比如使用transform: scale()代替改變高度和寬度屬性。要移動(dòng)元素，請(qǐng)避免更改頂部、右側(cè)、底部或左側(cè)屬性，可以使用transform: translate()代替。

如何衡量CLS

1、可以使用lighthouse和performce檢測(cè)CLS。

2、手動(dòng)測(cè)量 可以使用布局不穩(wěn)定性API。創(chuàng)建一個(gè)PerformanceObserver，該observer偵聽意外的布局移動(dòng)元素，將它們累加，并將它們記錄到控制臺(tái)。

let cls = 0;

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

如何改善CLS

首先，最常見的影響CLS的分?jǐn)?shù)的有：

• 未指定尺寸的圖片
• 未指定尺寸的廣告、嵌入元素、iframe
• 動(dòng)態(tài)插入內(nèi)容
• 自定義字體（引發(fā)FOIT/FOUT）
• 在更新DOM之前等待網(wǎng)絡(luò)響應(yīng)的操作

因此，改善方法有：

1. 最開始就設(shè)定好圖片的尺寸，或者預(yù)留足夠空間。這樣能確保瀏覽器可以在加載圖像時(shí)在文檔中分配正確的空間量。還可以使用unsize -media特性策略在支持特性策略的瀏覽器中強(qiáng)制執(zhí)行此行為。
2. 除非響應(yīng)用戶交互，否則切勿在現(xiàn)有內(nèi)容上方插入內(nèi)容。這樣可以確保可以預(yù)期發(fā)生任何版式移位。
3. 優(yōu)先使用變換動(dòng)畫屬性而不是觸發(fā)布局更改的動(dòng)畫屬性。對(duì)過(guò)渡進(jìn)行動(dòng)畫處理，以提供狀態(tài)與狀態(tài)之間的上下文和連續(xù)性。
4. web字體盡可能早的加載，避免產(chǎn)生FOIT和FOUT
5. 與UI同事配合在交互上避免布局偏移

參考資料

• https://web.dev/cls/
• https://zhuanlan.zhihu.com/p/207163394
• https://web.dev/optimize-cls/
• https://developers.google.com/publisher-tag/guides/minimize-layout-shift