你可能不知道的布局偏移（Layout Shift）

ErpanOmer
340 阅读5分钟

在网页性能优化中，布局偏移（layout shifts） 是一个重要的考量指标，特别是对于图片。图片加载时未预留足够空间可能会导致页面内容上下跳动，直接影响用户体验和页面的 Cumulative Layout Shift (CLS) 指标。

HTML 提供了多种方法来解决图片引发的布局偏移问题，其中包括 aspect-ratio 和 width & height 属性。那么，在实际开发中，应该选择哪种方法？它们的优缺点又是什么？

什么是布局偏移（Layout Shift）？

布局偏移 是指页面在渲染过程中，由于 DOM 元素的动态加载或尺寸变化导致的内容位置移动。它是衡量网页稳定性的核心指标之一。

常见触发布局偏移的原因：

  1. 图片加载后调整了尺寸。
  2. 动态插入内容（如广告或异步加载的数据）。
  3. 字体加载未完成导致文字排版变化。

图片的布局偏移 是因为在图片加载完成之前，浏览器无法确定其宽高，导致页面为图片预留了错误的空间。

解决图片布局偏移的核心思路

  1. 提前告知图片的宽高或宽高比：让浏览器在图片加载前就能计算出其占据的空间。
  2. 使用现代 CSS 或 HTML 技术预定义布局行为。

目前主流的解决方案有两种：

  • CSS 的 aspect-ratio 属性
  • HTML 的 width 和 height 属性

方法一：width 和 height 属性

在 HTML 中为图片添加 width 和 height 属性，浏览器可以根据它们的值计算出图片的宽高比，从而在图片加载前预留足够的空间。

示例

<img src="example.jpg" width="800" height="600" alt="Example Image">
  • 宽高比：800 ÷ 600 = 1.33。
  • 浏览器会根据图片容器的宽度自动调整高度，确保图片不会破坏布局。

优点

  1. 兼容性强：几乎所有浏览器都支持 width 和 height 属性。
  2. 减少 CLS：在图片加载前，浏览器可以正确计算空间。
  3. 简单直观：直接定义宽高，无需额外的 CSS。

缺点

  1. 如果没有配合响应式布局（如 max-width: 100%），可能会导致图片在小屏幕设备上溢出。
  2. 需要准确设置图片的宽高属性，动态生成的图片可能难以提前确定尺寸。

方法二：CSS 的 aspect-ratio 属性

aspect-ratio 是 CSS 中较新的属性，它允许开发者直接定义元素的宽高比，浏览器会根据比例自动分配空间。

示例

<img src="example.jpg" alt="Example Image" style="aspect-ratio: 4 / 3; width: 100%;">
  • aspect-ratio: 4 / 3 定义了宽高比为 4:3。
  • width: 100% 确保图片自适应容器宽度。

优点

  1. 灵活性高：无需提前知道图片的具体尺寸，只需定义宽高比。
  2. 更现代化：可以通过 CSS 轻松控制宽高比，与其他布局属性搭配更加灵活。
  3. 响应式友好：配合 width: 100% 和其他 CSS 属性，能轻松适配各种屏幕。

缺点

  1. 浏览器兼容性：较新的属性，旧版浏览器（如 IE）可能不支持。
  2. 需要开发者明确知道图片的宽高比（而非具体宽高）。

实践与对比

使用 width 和 height 属性的布局

<style>
  img {
    max-width: 100%; /* 确保图片在小屏设备上适配 */
    height: auto;
  }
</style>

<img src="example.jpg" width="800" height="600" alt="Example Image">
  • 适用场景：项目中已知图片的具体宽高。
  • 效果：页面加载时，浏览器为图片预留了 800:600 的空间，避免内容跳动。

使用 aspect-ratio 的布局

<style>
  .image-wrapper {
    width: 100%; /* 容器宽度 */
    aspect-ratio: 4 / 3; /* 容器宽高比 */
    background: url('example.jpg') no-repeat center / cover; /* 图片填充 */
  }
</style>

<div class="image-wrapper"></div>
  • 适用场景：图片来源不固定，但已知宽高比。
  • 效果：即使图片延迟加载，也能保持布局稳定。

哪种方法更适合你？

选择 width 和 height 的场景：

  1. 兼容性需求高：需要支持老旧浏览器。
  2. 图片尺寸固定：提前已知图片的宽高。

选择 aspect-ratio 的场景：

  1. 响应式布局优先：需要灵活适配不同屏幕。
  2. 无法提前确定具体宽高，但能确定比例。

常见误区

  1. 直接使用 CSS 的 width 和 height 代替 HTML 属性：

    • CSS 的 width 和 height 只定义了样式，并不会帮助浏览器预留空间。
    • 要解决布局偏移，必须在 HTML 标签中添加 width 和 height 属性。

  2. 忽略旧版浏览器的兼容性问题：

    • aspect-ratio 是现代化的属性，但在旧版浏览器中不支持。
    • 可以通过 width 和 height 提供后备支持。

实际应用：兼容性最佳实践

为了兼容性和性能，建议结合两种方法：

<img src="example.jpg" width="800" height="600" alt="Example Image" style="aspect-ratio: 4 / 3; max-width: 100%; height: auto;">
  • HTML 提供宽高信息，确保兼容性。
  • CSS 提供灵活性，确保响应式效果。

总结

避免图片引发的布局偏移是提升用户体验和 SEO 性能的重要一步。通过合理使用 width & height 属性，以及现代化的 aspect-ratio 属性，可以显著减少页面的 CLS 分值。

选择方法时，可以根据项目的实际需求进行取舍。如果需要兼容旧版浏览器且已知图片尺寸，width 和 height 是更好的选择。如果项目追求响应式设计且使用现代浏览器，aspect-ratio 则是一个更灵活的方案。

avatar
文章
阅读
粉丝