时间：2023-08-31 12:06:05 浏览：29
累积布局偏移：(简称cls)是google提出的一个非常重要的网页性能指标，是一个以用户为中心的内容视觉稳定性指标，因为它有助于量化用户经历的意外布局偏移的频率，低cls有助于保证页面用户的视觉和交互体验。
当用户浏览一个页面时，如果想要点击一个按钮或者进行交互，页面的布局会突然抖动，可能会导致用户的交互行为出现意想不到的结果。
当异步加载资源或在现有内容的基础上动态添加dom元素时，通常会发生页面内容的意外移动。罪魁祸首可能是大小未知的图像或视频、显示大于或小于备用字体的字体，或者是动态调整自身大小的第三方广告或小部件。
更糟糕的是，项目在开发过程中的功能通常与用户体验大相径庭。个性化或第三方内容在开发中的表现通常与在生产中的表现不同。测试镜像通常存在于开发者的浏览器缓存中，本地运行的api调用通常速度很快，所以延迟不明显。
比如常见的页面横幅图，当图片资源加载较慢时，并不影响浏览器的解析dom、合成layout tree等操作。当渲染整个页面时，图像会突然加载并渲染到页面上，这将导致严重的cls。
google一直以用户体验为首要任务，但实际上往往适得其反。很多热门的、有影响力的网站并没有把用户体验作为首要任务，少数前端开发者也没有太在意用户体验，cls就是影响用户体验的重要因素之一。
cls分数
cls评分越低，页面布局就越固定。官方的cls评分使用谷歌的性能工具如下
goodcls评分低于0.1，说明页面稳定
需求评分介于0.1和0.25之间，这意味着页面缺乏稳定性，需要优化
poorcls评分超过0.25，说明页面的稳定性已经和渣比了，页面的优化迫在眉睫
评分工具
了解cls得分，这里有一些官方的cls得分工具
field tools
chrome用户体验报告
页面速度洞察
搜索控制台(核心网络重要数据报告)
web-vitalsjavascript库
lab tools
调试工具
灯塔
网页测试
影响cls因素
没有为图片设置大小
没有为广告位、iframes等设置大小。
呈现内容的动态注入
网页字体导致foit/tout
在一些异步操作之前对dom进行操作(newwork)
如何优化cls
字体优化
当字体未下载时，浏览器会隐藏或自动降级，导致字体闪烁
隐形文字闪光
fout:未格式化文本的闪存
使用字体显示属性解决闪烁问题
@ font-face { font-display : block | swap | fallback | optional | auto；
}
使用css字体加载api
@font-face {
unicode-范围：//如果一次引入所有字体，加载的内容会很多，比如汉字太多，不可能一次全部加载。所以可以拆分汉字的使用频率，按优先级加载，只有使用了其中的字体才会加载。
}
使用preload更改预加载的资源加载优先级
！-跨域问题必须通过corssorigin=" anonymous "-link rel=" preload " href="来解决。/xxx . woff 2 " as=" font " type=" font/woff 2 " cross origin=" anonymous "
图片、视频、iframes、广告位等优化
为image和video等元素设置维度属性可以确保在加载它们的资源之前获得良好的占用效果，并且不会导致cls
img src=" xx . png " width=" 200 " height=" 200 " alt=" png "/
参考：
清屏
优化-cls
相关文章
怀孕周期
备孕分娩婴儿早教
猜你喜欢
