当前位置：首页 > article >正文

解释下Cumulative Layout Shift (CLS)以及如何优化？

article 2025/3/22 10:38:31

Cumulative Layout Shift (CLS) 解释与优化指南

Cumulative Layout Shift（累积布局偏移） 是衡量网页视觉稳定性的核心指标，属于 Google 的 Core Web Vitals（核心网页指标） 之一。它量化了页面在加载或交互过程中，元素意外移动的程度。CLS 值越低，用户体验越稳定。

布局偏移分数 = 影响范围（Impact Fraction） × 距离比例（Distance Fraction）
- 影响范围：受偏移影响的视口区域比例（0~1）。
  例如，一个元素占据视口高度的 50%，则影响范围为 0.5。
- 距离比例：元素移动的最大距离占视口高度的比例（0~1）。
  例如，元素垂直移动了视口高度的 25%，则距离比例为 0.25。
CLS 总分：页面生命周期内所有布局偏移分数的总和。

问题：图片、视频或广告未设置 width/height，加载后挤压下方内容。
```

<img src="banner.jpg" alt="Banner">
```

问题：弹窗、广告、懒加载内容突然插入，导致现有内容移位。

// 错误示例：动态插入未预留空间的元素
document.body.appendChild(adElement); // 插入广告后页面内容下移

问题：自定义字体加载前后，文本区域尺寸不一致。

/* 未优化字体加载 */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
}

问题：组件渲染后修改布局（如表格展开、图表渲染）。

// 异步加载数据后渲染表格
fetchData().then(data => renderTable(data)); // 表格渲染后挤压下方内容

问题：使用 top/left 等属性触发布局计算。

/* 错误示例：使用 top 触发布局偏移 */
.box {
  position: relative;
  top: 0;
  transition: top 0.3s;
}
.box:hover {
  top: 20px; /* 触发布局重排 */
}

指定固定尺寸：为图片、视频设置 width 和 height 属性。

<!-- 正确示例：设置宽高 -->
<img src="banner.jpg" width="600" height="400" alt="Banner">

响应式图片适配：使用 aspect-ratio 或 CSS 保持宽高比。

.responsive-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* 定义宽高比 */
}

预留空间：提前为动态内容分配占位容器。

<!-- 广告占位容器 -->
<div class="ad-placeholder" style="height: 300px;"></div>

// 动态插入内容时填充占位
document.querySelector('.ad-placeholder').appendChild(adElement);

预加载字体：使用 <link rel="preload"> 提前加载关键字体。
```
<link rel="preload" href="font.woff2" as="font" crossorigin>
```

控制字体显示行为：使用 font-display: swap 减少布局偏移。

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
  font-display: swap; /* 先显示备用字体，再替换 */
}

骨架屏占位：数据加载前显示骨架屏，保持布局稳定。

<!-- 骨架屏示例 -->
<div class="skeleton" style="width: 100%; height: 200px;"></div>

分块渲染：将大数据渲染拆分为多个任务。

function renderLargeList(items) {
  items.forEach((item, index) => {
    requestAnimationFrame(() => {
      renderItem(item);
    });
  });
}

优先使用 transform 和 opacity：避免触发布局或绘制。

/* 正确示例：使用 transform 实现位移 */
.box {
  transition: transform 0.3s;
}
.box:hover {
  transform: translateY(20px); /* 仅触发合成，无布局偏移 */
}

延迟加载非关键脚本：使用 async 或 defer。
```
<script src="analytics.js" async></script>
```
稳定广告容器尺寸：与广告提供商约定固定尺寸或响应式逻辑。

Chrome DevTools
- Performance 面板：录制页面加载过程，查看布局偏移事件。
- Layout Shift Regions：在 Rendering 面板中高亮布局偏移区域。
Lighthouse
- 运行性能测试，获取 CLS 分数及具体优化建议。

Web Vitals 库

import { getCLS } from 'web-vitals';
getCLS(console.log); // 输出 CLS 数据