CLS 深入解析：Cumulative Layout Shift 的成因与治理

# 概述 CLS 衡量页面布局意外变化的程度。加载阶段与加载后的意外变化均会计入（交互 500ms 内的预期变化不计入）。治理重点在于提供稳定的占位、规范字体加载与避免非 transform/opacity 动画引起的重排。 # 常见成因 - 图像/嵌入缺失尺寸：未设置 `width/height` 或 CSS 尺寸导致内容加载后推挤布局［参考1］。 - 字体加载：FOIT/FOUT 造成文本从不可见或回退字体切换到 Web 字体，引发布局偏移［参考1,3］。 - 懒加载与广告：滚动时异步插入内容，若无占位会挤压布局；SPA 过渡超过 500ms 也可能计入［参考1］。 - 不当动画：改变 `top/left/width/height` 等会触发重排，应使用 `transform/opacity`。 # 治理清单 - 提供尺寸占位：为图片、视频、嵌入与组件设定明确尺寸或比例盒；使用 `aspect-ratio` 与占位符。 - 字体策略：本地托管与 `preload`；`font-display: swap/fallback/optional` 以避免 FOIT；考虑系统字体栈减少偏移［参考2,3］。 - 懒加载策略：为懒加载内容预留容器尺寸；使用占位骨架；避免插入前移内容；谨慎广告插入。 - 动画与过渡：使用 `transform/opacity`；避免布局属性动画。 # 参考与验证 - ［参考1］web.dev：优化 CLS（加载阶段与后加载场景、500ms 规则、常见成因）：https://web.dev/articles/optimize-cls - ［参考2］WordPress 指南：字体加载与 FOIT/FOUT 避免建议：https://www.wbolt.com/cumulative-layout-shift.html - ［参考3］文章：字体对 CLS 的影响与 FOIT/FOUT 解析：https://www.positional.com/blog/cumulative-layout-shift # 关键词校验 关键词与 CLS 成因与治理一致。