更多精选文章

常见的CLS成因🔥 未指定尺寸的图片或视频 🎆：浏览器在加载媒体资源前未预留空间，导致文件加载后“撑开”页面

优化字体加载策略 使用font-di🎵splay: swap或optional属性，并在CSS中预设font-size和line-height，使得后备🔍字体占据的空间尽可能与目标字体接近

总结

简单来说，当页面中的元素（如图片🌅、广告、按钮）在加载过程中突然发生位🎊移，导致用户点击错误或阅读中断，CLS就会反映这种不良体验的严重程度

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

Web字体加载引起的布局偏移 ：自定义字体未加载时使用后备字体，加载后因字宽不同导致文字重新排列