张文勇

要修复CLS，首先需要理解其产生的常见原因： 未设置尺寸的图片或视频 ：当图片、视频或嵌入内容未明确指定宽度和高度时，浏览器在加载这些资源前无💯法预留空间，导致后续内容突然下移

对第三方脚本进行加载延迟（如 asy🔮nc 或 defer ），避免它们在主渲染线程中阻塞布局

CLS修复实战：从预留空间到加载顺序

异步加载的字体 ：Web字体（如Google Fonts）加载延迟时，文本会先用系统字体渲染，字体切换后导致行高、间距变化

优化自定义字体加载 使用 fon🎆t-displa🔍y: swap 可以让文本在备用字体渲染后立即可见，待自定义字体加载完成时再切换