累計佈局偏移: Cumulative Layout Shift, 簡稱CLS，是Google提出的一項非常重要的網頁效能指標，以使用者為中心的內容視覺穩定性指標，因為它有助於量化使用者體驗到意外佈局移位的頻率，較低的CLS有助於確保頁面使用者視覺和互動體驗。

頁面內容的意外移動通常發生在資源非同步載入或DOM元素被動態新增到現有內容之上的頁面上。罪魁禍首可能是尺寸未知的影象或影片、顯示大於或小於回退的字型、或動態調整自身大小的第三方廣告或小部件。

使這個問題更加嚴重的是，一個專案在開發過程中的功能通常與使用者的體驗有很大的不同。個性化或第三方內容在開發時的表現通常與在生產時不一樣，測試影象通常已經存在於開發人員的瀏覽器快取中，本地執行的API呼叫通常非常快，因此延遲並不明顯。

比如常見的頁面banner圖，當圖片資源載入緩慢的時候，並不影響瀏覽器解析DOM、CSSOM合成Layout Tree等操作，當頁面整體渲染完成之後圖片突然載入完成並渲染到頁面上，便會造成嚴重的CLS。

Google一直是將使用者體驗作為首要任務，但是在現實中往往事與願違，很多流行且具有影響的網站並沒有將使用者體驗作為首要任務，少數前端開發者也並沒有過多關注使用者體驗，而CLS便是影響使用者體驗的重要因素之一。

CLS分數

CLS得分越低,代表頁面的佈局越摁釘。官方CLS分數使用谷歌的效能工具如下

GoodCLS評分低於0.1分，代表頁面很穩定NeedsCLS評分在0.1-0.25之間，代表頁面穩定性欠缺，需要對頁面進行最佳化PoorCLS評分超過0.25，代表頁面的穩定性已經比較渣渣了，頁面的最佳化已經迫在眉睫評分工具

知道CLS分數，接下來是官方給出的一些CLS評分工具

Field toolsChrome User Experience ReportPageSpeed InsightsSearch Console (Core Web Vitals report)web-vitals JavaScript libraryLab toolsChrome DevToolsLighthouseWebPageTest影響CLS因素沒有為圖片設定尺寸沒有為廣告位、iframes等設定尺寸動態注入渲染內容網頁字型導致FOIT/TOUT在一些非同步操作(newwork)之前對DOM進行操作如何最佳化CLS字型最佳化

字型在未下載完成時,瀏覽器隱藏或者自動降級,導致字型閃爍

FOIT: Flash Of Invisible TextFOUT: Flash Of Unstyled text

使用 font-display屬性解決閃爍的問題

@font-face {    font-dispaly: block | swap | fallback | optional | auto;}

使用css font loading API

@font-face {     unicode-range: ....; // 若是一次性將所有的字型都引入,會導致載入的內容非常多,例如漢字那麼多,不可能一次性全部載入,因此可以將漢字使用頻率進行拆分,然後按照優先順序進行載入,且只有當其中的字型被使用的時候才會進行載入}

使用 preload 改變資源載入優先順序進行預載入

<img src="xx.png" width="200" height="200" alt="png" />

參考：

clsoptimize-cls