cls只是测量值而非修复工具，getcls()返回累加浮点数但不执行任何修复；常见诱因包括图片缺宽高、字体回退导致重排、动态内容未预占位等。
CLS 本身不能解决布局偏移，它只是一个测量值——就像用体温计测出发烧，但体温计不会退烧。
getCLS() 返回的只是数字，不是修复动作
你调用 getCLS() 得到的是一个浮点数（比如 0.24），它只反映页面生命周期内所有「非用户触发 + 视口内意外位移」的累积影响。这个函数不修改 DOM、不注入 CSS、也不阻止 JS 执行。
- 默认情况下，
getCLS()会忽略用户交互后 500ms 内的偏移（比如点击按钮后广告加载导致的跳动） - 单页应用中，路由切换后的偏移可能被计入前一个页面的 CLS 总和，需手动调用
reset()或监听navigation事件 - 返回值是累加值，但真正伤体验的是单次 >
0.002的偏移片段；只看最终值容易漏掉高频小抖动
![]()
缺 width/height 是最常见 CLS 诱因
浏览器在首次绘制时若不知道图片尺寸，就无法预留空间。等图片加载完成，<img> 突然撑开容器，下方所有元素集体下移——这就是典型的 CLS 贡献源。
- 现代写法优先用
aspect-ratio: 16/9+width: 100%，比旧式padding-top更可靠且语义清晰 - 仍建议保留原生
width和height属性（哪怕只是占位数值），部分 SSR 框架和爬虫依赖它推导宽高比 -
loading="lazy"不解决尺寸问题，反而放大风险：懒加载图片更可能在用户滚动到视口时才触发重排
font-display: swap 不等于零偏移
用 font-display: swap 能避免阻塞渲染，但回退字体和自定义字体的行高、字宽差异仍会导致文本重排——尤其在段落首行或按钮内文字上，视觉跳动明显。
- 必须配合
size-adjust或font-size-adjust控制回退字体尺寸，例如@font-face { size-adjust: 102%; } - 避免在关键文案区域（如 H1、CTA 按钮）使用未做尺寸对齐的 Web Font
- 系统字体栈要尽量匹配：比如自定义字体是无衬线体，回退链里就别放
serif，优先用system-ui或-apple-system
动态插入内容必须预占位，不能靠 JS 补救
JS 插入广告、评论、推荐模块时，如果父容器没有明确高度约束，插入瞬间就会挤压现有流内元素。此时加 transition 或 opacity 动画只是掩盖问题，不减少 CLS 值。
- 用
min-height或aspect-ratio给容器设硬性占位，比如.ad-placeholder { min-height: 250px; } - 骨架屏（skeleton）比纯空容器更优：它提供视觉预期，且自身结构稳定，不依赖内容尺寸
- 第三方组件（如 cookie banner）优先用
position: fixed或position: sticky，彻底脱离文档流
CLS 数值低，不代表没偏移；CLS 数值高，也不代表要重写整个渲染逻辑。真正要盯住的，是 Chrome DevTools Rendering 面板里的 Layout Shift Regions —— 那些真正“在跳”的元素，才是你该加 width、aspect-ratio 或 contain: layout 的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
