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

应用介绍

概述CLS 衡量页面视觉稳定性，良好阈值 ≤ 0.1。常见来源包括未声明尺寸的媒体、动态插入内容与异步字体加载。优化重点在于明确尺寸、避免上方插入与稳健的占位策略。用法/示例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 }) <!-- 为图片声明尺寸或使用宽高属性，避免布局跳变 --> <img src="/hero.jpg" width="1200" height="800" alt="Hero" decoding="async" /> 工程建议为图片/视频/iframe/广告位声明固定或可计算的尺寸，占位避免跳变。避免在现有内容上方插入元素；对动态内容使用过渡并预留空间。字体加载使用 `font-display: swap` 与合理的 FOUT/FOIT 策略，减少文本回流。参考与验证web.dev：CLS — https://web.dev/articles/clsMDN：PerformanceObserver — https://developer.mozilla.org/docs/Web/API/PerformanceObserver