CLS Cumulative Layout Shift
一句话定义
页面加载过程中，元素意外移动的累积分数。
打个比方 Analogy
你正准备点击"立即购买"按钮，突然上面弹出一个广告，按钮往下跑了，你点到了广告。
岗位实战怎么做 In Practice
目标 < 0.1。优化方法：为图片和视频设置明确的 width 和 height 属性、避免在现有内容上方插入动态内容（如横幅广告）、使用 font-display: swap 避免字体闪烁。
案例与避坑 Pitfalls
弹窗（Popup）和延迟加载的图片是 CLS 的主要元凶。确保广告位有预留空间（aspect ratio box）。