什么是 CLS

CLS，即Cumulative Layout Shift 累積布局偏移

CLS 測(cè)量整個(gè)頁(yè)面生命周期內(nèi)發(fā)生的所有意外布局偏移中最大一連串的布局偏移分?jǐn)?shù)。

每當(dāng)一個(gè)可見元素的位置從一個(gè)已渲染幀變更到下一個(gè)已渲染幀時(shí)，就發(fā)生了布局偏移 。（有關(guān)單次布局偏移分?jǐn)?shù)計(jì)算方式的詳細(xì)信息，請(qǐng)參閱下文。）

一連串的布局偏移，也叫會(huì)話窗口，是指一個(gè)或多個(gè)快速連續(xù)發(fā)生的單次布局偏移，每次偏移相隔的時(shí)間少于 1 秒，且整個(gè)窗口的最大持續(xù)時(shí)長(zhǎng)為 5 秒。

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

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

CLS問題有哪些影響

在網(wǎng)上閱讀一篇文章時(shí)，結(jié)果頁(yè)面上的某些內(nèi)容突然發(fā)生改變。

文本在毫無預(yù)警的情況下移位，導(dǎo)致您找不到先前閱讀的位置。

或者更糟糕：正要點(diǎn)擊一個(gè)鏈接或一個(gè)按鈕，但在鼠標(biāo)點(diǎn)擊的瞬間，鏈接移位了，結(jié)果點(diǎn)到了別的東西！

各搜索引擎對(duì)此類問題是比較反感的，具體表現(xiàn)的負(fù)面作用，就是嚴(yán)重影響網(wǎng)頁(yè)權(quán)重和搜索引擎收錄。

如何優(yōu)化CLS

可以通過遵循一些指導(dǎo)原則來避免所有的意外布局偏移：

1、始終在您的圖像和視頻元素上包含尺寸屬性，或者通過使用CSS 長(zhǎng)寬比容器之類的方式預(yù)留所需的空間。
2、可以使用unsized-media 功能策略在支持功能策略的瀏覽器中強(qiáng)制執(zhí)行此行為。
3、除非是對(duì)用戶交互做出響應(yīng)，否則切勿在現(xiàn)有內(nèi)容的上方插入內(nèi)容。這樣能夠確保發(fā)生的任何布局偏移都在預(yù)期之內(nèi)。
4、首選轉(zhuǎn)換動(dòng)畫，而不是觸發(fā)布局偏移的屬性動(dòng)畫。動(dòng)畫過渡的目標(biāo)是提供狀態(tài)與狀態(tài)之間的上下文連續(xù)性。

原文相關(guān)：

z197.com/blog/cls-optimization-problem-cumulative-layout-shift.html