"我正準備點那里！為什么移走了？?"

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

累積布局偏移 (CLS)：核心 Web 指標中的一項指標，通過計算未在用戶輸入 500 毫秒內發生的布局偏移的偏移分數總和來測量內容的不穩定性。該項指標查看可視區域中可見內容的位移量以及受影響元素的位移距離。

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

CLS 較差的最常見原因為：

無尺寸的圖像
無尺寸的廣告、嵌入和 iframe
動態注入的內容
導致不可見文本閃爍 (FOIT)/無樣式文本閃爍 (FOUT) 的網絡字體
在更新 DOM 之前等待網絡響應的操作

無尺寸的圖像 ? #

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

歷史 #

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

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

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

響應式網頁設計得到引入后，開發者開始省略width和height，并取而代之開始使用 CSS 來調整圖像大小：

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

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

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

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

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

現代最佳實踐 #

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

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

……而且所有瀏覽器的UA 樣式表都會根據元素現有的width和height屬性添加默認長寬比：

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

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

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

如需深入了解長寬比并對響應式圖像展開進一步思考，請參閱使用媒體長寬比實現無卡頓頁面加載。

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

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

如何處理響應式圖像？

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

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

如何處理美術設計？

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

<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>