"我正準(zhǔn)備點(diǎn)那里！為什么移走了？?"

布局偏移可能會分散用戶的注意力。想象一下，您已經(jīng)開始閱讀一篇文章，可是頁面上的元素突然位移，讓您措手不及，于是您不得不再次找到先前閱讀的位置。這在網(wǎng)絡(luò)上十分常見，包括在閱讀新聞或嘗試單擊"搜索"或"添加到購物車"按鈕時(shí)。這種體驗(yàn)在視覺上十分扎眼且令人郁悶。這些情況通常是由于另一個(gè)元素被突然添加到頁面上或是突然調(diào)整了大小，使可見元素被迫移動位置而導(dǎo)致的。

累積布局偏移 (CLS)：核心 Web 指標(biāo)中的一項(xiàng)指標(biāo)，通過計(jì)算未在用戶輸入 500 毫秒內(nèi)發(fā)生的布局偏移的偏移分?jǐn)?shù)總和來測量內(nèi)容的不穩(wěn)定性。該項(xiàng)指標(biāo)查看可視區(qū)域中可見內(nèi)容的位移量以及受影響元素的位移距離。

在本篇指南中，我們將介紹針對布局偏移常見成因的優(yōu)化方式。

CLS 較差的最常見原因?yàn)椋?/p>

無尺寸的圖像
無尺寸的廣告、嵌入和 iframe
動態(tài)注入的內(nèi)容
導(dǎo)致不可見文本閃爍 (FOIT)/無樣式文本閃爍 (FOUT) 的網(wǎng)絡(luò)字體
在更新 DOM 之前等待網(wǎng)絡(luò)響應(yīng)的操作

無尺寸的圖像 ? #

概述：始終在您的圖像和視頻元素上包含width和height屬性。或者通過使用CSS 長寬比容器預(yù)留所需的空間。這種方法可以確保瀏覽器能夠在加載圖像期間在文檔中分配正確的空間大小。

歷史 #

在網(wǎng)絡(luò)發(fā)展的早期階段，開發(fā)者會在他們的<img>標(biāo)簽中加入width和height屬性，從而確保瀏覽器在開始獲取圖像前會在頁面上預(yù)先分配足夠的空間。這樣可以最大限度地減少回流和重排。

<img src="puppy.jpg" width="640" height="360" alt="小狗與氣球" />

您可能會注意到，上方的width和height不包括單位。這些"像素"尺寸可以確保一塊 640x360 的保留區(qū)域。無論圖像的真實(shí)尺寸是否匹配，該圖像都會被拉伸成保留區(qū)域的大小。

響應(yīng)式網(wǎng)頁設(shè)計(jì)得到引入后，開發(fā)者開始省略width和height，并取而代之開始使用 CSS 來調(diào)整圖像大小：

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

這種方法的一個(gè)缺點(diǎn)是，只有在圖像開始下載且瀏覽器可以確定其尺寸后才能為圖像分配空間。隨著圖像的加載，頁面會隨著每個(gè)圖像出現(xiàn)在屏幕上而進(jìn)行重排，因此導(dǎo)致文本常常突然出現(xiàn)在屏幕上。這與良好的用戶體驗(yàn)相距甚遠(yuǎn)。

這種情況下就需要用到長寬比。圖像的長寬比是圖像寬度與高度的比例。我們通常用由冒號分隔的兩個(gè)數(shù)字來表示長寬比（例如 16:9 或 4:3）。x:y 的長寬比表示圖像的寬度為 x 單位，高度為 y 單位。

也就是說，如果我們知道其中一個(gè)維度，就可以確定另一個(gè)維度。對于 16:9 的長寬比：

如果 puppy.jpg 的高度為 360px，則寬度為 360 x (16 / 9) = 640px
如果 puppy.jpg 的寬度為 640px，則高度為 640 x (9 / 16) = 360px
在知道長寬比的情況下，瀏覽器就能夠進(jìn)行計(jì)算，并為高度和其關(guān)聯(lián)區(qū)域預(yù)留足夠的空間。

現(xiàn)代最佳實(shí)踐 #

現(xiàn)代瀏覽器目前會根據(jù)圖像的寬度和高度屬性設(shè)置圖像的默認(rèn)長寬比，因此，通過設(shè)置這些屬性來防止布局偏移是非常有價(jià)值的。感謝 CSS 工作組的努力，開發(fā)者只需要照常設(shè)置width和height即可：

<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="小狗與氣球" />

……而且所有瀏覽器的UA 樣式表都會根據(jù)元素現(xiàn)有的width和height屬性添加默認(rèn)長寬比：

img {
  aspect-ratio: attr(width) / attr(height);
}

提示：如果您很難理解長寬比，還可以使用便捷的計(jì)算器來幫助計(jì)算。

上述針對圖像長寬比的變化已經(jīng)在 Firefox 和 Chromium 中得到應(yīng)用，并將在 WebKit (Safari) 中進(jìn)行應(yīng)用。

如需深入了解長寬比并對響應(yīng)式圖像展開進(jìn)一步思考，請參閱使用媒體長寬比實(shí)現(xiàn)無卡頓頁面加載。

如果您的圖像在容器中，您可以使用 CSS 將圖像大小調(diào)整為該容器的寬度。我們需要設(shè)置height: auto;來避免圖像高度為某個(gè)固定值（例如360px ）。

img {
  height: auto;
  width: 100%;
}

如何處理響應(yīng)式圖像？

處理響應(yīng)式圖像時(shí)，srcset定義了允許瀏覽器選擇的圖像以及每個(gè)圖像的大小。為了保證<img>的寬度和高度屬性可以進(jìn)行設(shè)置，每個(gè)圖像都應(yīng)該采用相同的長寬比。

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="小狗與氣球"
/>

如何處理美術(shù)設(shè)計(jì)？

頁面可能會想要在窄可視區(qū)域中包含一張剪裁后的圖像，并在桌面上顯示完整圖像。

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="小狗與氣球" />
</picture>