简介
1 .您是否曾经历过在网上阅读一篇文章，结果页面上的某些内容突然发生改变？文本在毫无预警的情况下移位，导致您找不到先前阅读的位置。或者更糟糕的情况：您正要点击一个链接或一个按钮，但在您手指落下的瞬间，诶？链接移位了，结果您点到了别的东西！
2 .这个场景我目前没遇到过，都是会占位的。唯一可能遇到的就是分享生成截图的时候
3 .页面内容的意外移动通常是由于异步加载资源，或者动态添加 DOM 元素到页面现有内容的上方。罪魁祸首可能是未知尺寸的图像或视频、实际渲染后比后备字体更大或更小的字体，或者是动态调整自身大小的第三方广告或小组件。
4 .测量标准 。每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移
5 .还有专门的api https://web.dev/cls/
1 .布局偏移是由布局不稳定API定义
2 .可视区域中可见元素的起始位置，比如元素在默认书写模式下的顶部和左侧位置。在两帧之间发生了变化，
3 .这样的元素就叫做不稳定元素
image.png
6 .如图所示，文字元素在一帧中占据了一半的可视元素，下一帧中，元素下移了可是元素高度的25%，红色矩形框表示了两帧中元素的可见区域集合。
image.png
预期布局偏移vs意外布局偏移
1 .用户发起的布局偏移。布局偏移只有在用户期望是发生时才是好事。为了配合用户交互，点击链接，点击按钮，在搜索框中输入信息进行响应的布局偏移通常没有问题。
2 .前提是偏移发生的时机与交互时机足够接近，使用户对前后关系一目了然。500ms内
3 .动画和过度
1 .如果动画和过渡做的好，确实是一个在更新页面内容时不会让用户感到突兀的好方法
2 .transform 属性可以使你在能够不触发布局位移的情况下为元素设置动画 transform:scale()来替代和调整height,width属性。
3 .如果使元素能够四处移动，可以用transform：translate来替代和调整top,right,bottom,left属性
优化CLS
1 .常见原因
1 .无尺寸的图像
2 .无尺寸的广告，嵌入和iframe
3 .动态注入的内容
4 .导致不可见的文本闪烁、无样式文本闪烁的网络字体
5 .在更新DOM之前等到网络响应的操作
2 .无尺寸的广告
1 .广告生命周期中有许多时间点会引发布局位移
2 .在dom找那个插入广告容器
3 .网站使用第一方代码调整广告容器的大小
4 .广告标签库加载时
5 .广告填满容器时
3 .下载和渲染网络字体可能通过两种方式导致布局偏移
1 .后备字体替换为新字体
2 .新字体完成渲染前显示不可见文本
4 .font-display 自定义字体的渲染行为
1 .font-display:optional 浏览器会等最靠前的字体加载完成，才会显示，如果没加载就不会显示任何东西。这个时间会等100ms,如果这个时间没有下载好，就会使用默认字体。
5 .字体加载api
var f = new FontFace('test', 'url(x)');
f.load().then(function () {
// 网页可以开始使用该字体
});
6 .在关键字体上使用link rel=preload，预加载的字体将有更大几率在首次绘制中出现，而这种情况下将不会发生布局偏移
7 .将link preload和font-display:optional结合使用
8 .font-face加载时间
font-face加载的时间：定义一个@font-face并不会立刻开始下载字体，而是在渲染树生成之后，浏览器发现渲染树中有非空的使用了font-face的字体才开始下载（IE9+会下载空节点）。
网友评论