标准答案
- CLS 衡量页面生命周期中意外布局偏移的累计影响。
- 排查时可以用 Lighthouse、Performance 面板和 Web Vitals 标记找到发生偏移的元素。
- 图片、视频和 iframe 应该设置 width/height 或 aspect-ratio，避免加载后撑开布局。
- 广告、推荐位、提示条等异步内容要预留空间，不能突然插入到已有内容上方。
- 动画应优先使用 transform，不要用会影响布局的 top、height、margin 做高频动画。
题目解析
这题要把指标和具体 CSS 写法联系起来。布局偏移通常来自首屏尺寸不稳定。
排查时不要只看最终页面，要看加载过程中哪些元素位置突然变化。
代码示例
aspect-ratio 可以在图片加载前稳定占位。
CSS
.hero-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}常见误区
- 只压缩图片体积，却没有给图片预留尺寸。
- 异步插入顶部横幅，导致正文整体下移。
- 用 margin 或 height 做展开动画，造成明显布局偏移。