Cumulative Layout Shift（CLS）：布局稳定性与优化策略

## 概述 CLS 衡量页面视觉稳定性，良好阈值 ≤ 0.1。常见来源包括未声明尺寸的媒体、动态插入内容与异步字体加载。优化重点在于明确尺寸、避免上方插入与稳健的占位策略。 ## 用法/示例 ```js let cls = 0 const po = new PerformanceObserver(list => { for (const e of list.getEntries()) { if (!e.hadRecentInput) cls += e.value } }) po.observe({ type: 'layout-shift', buffered: true }) ``` ```html ``` ## 工程建议 - 为图片/视频/iframe/广告位声明固定或可计算的尺寸，占位避免跳变。 - 避免在现有内容上方插入元素；对动态内容使用过渡并预留空间。 - 字体加载使用 `font-display: swap` 与合理的 FOUT/FOIT 策略，减少文本回流。 ## 参考与验证 - web.dev：CLS — https://web.dev/articles/cls - MDN：PerformanceObserver — https://developer.mozilla.org/docs/Web/API/PerformanceObserver