28｜视觉：避免发生布局偏移影响用户交互

1. 累积布局偏移（CLS）是一个网页指标，用于衡量在网页的整个生命周期内，所有意外布局偏移的总分。 2. CLS值是一个分数，而不是时间值，分数低于0.1或没有这个值，就认为没有用户体验问题。 3. 避免布局偏移问题需要确保在每一帧中，浏览器视口内的所有元素没有水平或垂直距离的移动。 4. 确认浏览器视口中的图片是否都已加上 `width` 和 `height` 属性，以避免布局偏移。 5. 可以通过CSS属性 `aspect-ratio` 或 `srcset` 属性来解决移动设备上图片尺寸适配的问题。 6. 为了避免布局偏移问题，尤其是移动设备，应尽可能提前定义视口中的图片尺寸，即使无法预知这些尺寸，也可以设定一个预设的宽高比，以便浏览器可以预留空间渲染图片。 7. 动态插入页面内容是网页交互中最常见的行为，避免由于动态内容导致的布局偏移，主要有四种方法。 8. CSS动画可能导致布局偏移，应优先使用 `transform` 属性来改变元素的位置，而不是使用 `top`、`right`、`bottom` 或 `left` 属性。 9. 避免使用CSS改变元素的大小和位置，尽量使用 `transform` 属性替代。 10. 累积布局偏移作为网页核心指标之一，其主要目的是衡量用户的真实交互体验，需要根据实际情况分析具体问题，找出有效的优化方案，使前端页面更友好，提升用户体验。