如何修复CLS 问题：超过 0.25

CLS（Cumulative Layout Shift，累积布局偏移）是衡量页面视觉稳定性的重要指标。如果 CLS 超过 0.25，可能导致不良的用户体验，特别是在移动设备上。以下是修复 CLS 问题的详细方法和注意事项：

1. 常见导致 CLS 的原因

1.1 图片和视频没有指定尺寸

图片或视频加载时，没有明确的宽度和高度，浏览器会先显示一个占位符，随后内容加载后，页面布局发生变化。

1.2 动态加载内容

异步加载广告、推荐组件、字体等，导致布局被后续插入的内容推挤。

1.3 自定义字体加载

浏览器会使用备用字体，加载完成后再切换为自定义字体，导致文字大小或间距变化。

1.4 动态插入 DOM 元素

JavaScript 插入新内容（如弹窗、通知栏等）会导致布局变化。

2. 修复 CLS 问题的方法

2.1 为图片和视频明确指定尺寸

为所有图片、视频、SVG 或 iframe 设置明确的宽度和高度，或使用 CSS 的 aspect-ratio：

HTML代码示例：

<img src="example.jpg" width="300" height="200" alt="example">

CSS（如果无法直接指定宽高）：

img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* 3:2 比例 */
}

2.2 保留内容占位符

为动态内容（如广告或推荐模块）预留固定大小的占位符，避免加载后推挤页面内容。

代码示例：

<div style="width: 300px; height: 250px; background-color: #f0f0f0;">
    <!-- 广告加载前的占位 -->
</div>

对于图片懒加载，确保使用 loading="lazy" 和指定占位样式：

<img src="example.jpg" loading="lazy" width="300" height="200" alt="example">

2.3 使用 CSS 固定高度的动态元素

为动态插入的元素（如通知栏、按钮）设置固定的高度或位置：

代码示例：

#notification {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #f0f0f0;
}

2.4 优化自定义字体加载

避免字体加载引起的布局偏移，可以使用 font-display: swap;，加载自定义字体前先显示备用字体。

在页面中嵌入 @font-face，避免字体切换。

代码示例：

@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2');
    font-display: swap;
}

2.5 避免脚本插入内容引起的偏移

动态插入 DOM 元素时，提前为它们的大小和位置预留空间。

代码示例：

<!-- 插入前 -->
<div id="content"></div>

<script>
    const content = document.getElementById('content');
    content.style.height = '300px'; // 预留空间
    setTimeout(() => {
        content.innerHTML = '<p>动态加载的内容</p>';
    }, 1000);
</script>

2.6 延迟加载动画的优化

对于需要动态插入的弹窗或动画效果，使用 transform 或 opacity 等属性，而不是直接改变布局属性（如 margin 或 padding）。

代码示例：

.popup {
    position: fixed;
    bottom: 0;
    transform: translateY(100%); /* 初始在视口下方 */
    transition: transform 0.3s ease-in-out;
}

.popup.show {
    transform: translateY(0); /* 平滑显示 */
}

3. 检查和优化工具

使用 Google 的 Lighthouse 或 Chrome DevTools 检查 CLS 问题。
使用 WebPageTest 查看页面的 CLS 分数。
优化后，测试页面在移动设备上的 CLS 指标是否低于 0.1。

4. 总结

为图片和动态内容设置尺寸或占位符。
提前为广告和异步加载内容预留空间。
使用字体加载优化技术，避免切换字体引起的偏移。
减少 DOM 的动态插入对布局的影响。

通过以上优化，CLS 分数应该能够显著降低，保持用户体验流畅稳定。