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

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

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

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

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

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

無(wú)尺寸的圖像 ? #

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

歷史 #

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

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

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

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

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

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

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

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

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

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

現(xiàn)代瀏覽器目前會(huì)根據(jù)圖像的寬度和高度屬性設(shè)置圖像的默認(rèn)長(zhǎng)寬比，因此，通過(guò)設(shè)置這些屬性來(lái)防止布局偏移是非常有價(jià)值的。感謝 CSS 工作組的努力，開(kāi)發(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 樣式表都會(huì)根據(jù)元素現(xiàn)有的width和height屬性添加默認(rèn)長(zhǎng)寬比：

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

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

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

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

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

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

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

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

頁(yè)面可能會(huì)想要在窄可視區(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>