CLS是怎么产生的？

未声明尺寸的自定义字体： 字体加载后改变了文字占用的空间

对于响应式图片，可以🔥使用 aspect-ratio CS🔮S属性来保持比例

实际上，整🔑个页面的所❤️有布局偏移都会累加，包括用户滚动后新加载的区域

持续监控，步步为营

不要在用户🎯交互过程中突然把内容插入到已经渲染好💎的文本中间

避免在页面顶部插入未预留高度的元素 页面的首屏内容（above the fold）是CLS影响最大的区域

用百度搜索的视角看CLS

动态注入的内容： 😎比如弹窗、banner、推荐模块，在用户阅❤️读时突然出现

使用字体回退策略 自定义字体（如Google Fonts）加载时，应该使用 font-display: swap 配合合适的后备字体，让浏览器先用系统字体渲染文字，等自定义字体加载后再替换，从而避免文字区域尺寸突变

用百度搜索的视角看CLS 百度在移动端和💯PC端的搜索结果排序中，越来越重视🎇页面体验指标