更多精选文章

以下是实际工作中最常见的几种情况： 图片或视频未设置尺寸属性 ：当浏览器不知道图片的宽高比例时，图片加载完成后会挤占已有内容的位置，造成下方文本或按钮下移

如何检测和监控CLS

如果广告实际尺寸比预留空间小或大，可以配合溢出隐藏或滚动条来处理，核心原则是不要让容器在加载完成后突🍀然改变高度

陈国珠

当页面中的元素在加载完成后突然移动位置，比如用户正🔮要点击一个按钮时🔥，按钮突然被新加载的图片挤到下方，这种糟糕的体验就会导致CLS得分变差

字体加载导致的文本重排 ：使用自定义字体时，浏览器先用后备字体显示文字，等到自定义字体下载完毕再替换，两种字体的字形宽度不同，就会导致段落换行变化

什么是累积布局偏移（CLS）

但为了进一😎步减少布局偏移，可以考虑使用 font-display: optional ，它只在字体缓存较快时才替换，否则一直使用后备字体，从而完全消除重排风险

使用CSS p⭐osition: fixed 或 position: sticky 定位的元素不会影响其他内容的布局

如何检测和监控CL✅S 优化完成后📢，需要验证是否真的有效