CSS 布局性能优化学习

今日主要围绕 CSS 布局性能优化展开深入学习，了解了重排和重绘的概念以及触发场景及影响，接着掌握了一系列减少重排和重绘的策略。首先说重排和重绘的概念：
定义理解
重排（Reflow）：当 DOM 的变化影响了元素的布局信息（元素的宽高、边距、位置等）时，浏览器需要重新计算元素在视口内的位置和大小，将其安放到界面中的正确位置，这个过程称为重排。例如，改变元素的宽度、高度、边距，添加或删除 DOM 节点等操作都会触发重排。
重绘（Repaint）：当一个元素的外观发生改变，但没有影响到布局信息时，浏览器会将元素的新外观绘制到屏幕上，这个过程就是重绘。像改变元素的颜色、背景色、透明度等操作会触发重绘。
触发场景梳理
重排触发场景：页面初始渲染；浏览器窗口大小改变；元素尺寸或位置改变；元素内容变化（如文本数量或图片大小改变）；添加或删除可见的 DOM 元素；激活 CSS 伪类（如 :hover）等。
重绘触发场景：重排一定会触发重绘，但重绘不一定伴随重排。除了上述触发重排的操作可能间接触发重绘外，单纯修改元素的外观属性（如颜色、边框样式等）也会触发重绘。
减少重排和重绘策略
批量修改样式
原理：多次单独修改样式会导致多次重排和重绘，而批量修改样式可以将多次操作合并为一次，减少重排和重绘的次数。
实践：通过先在 JavaScript 中修改元素的多个样式属性，然后一次性将修改后的样式应用到元素上。
使用 transform 和 opacity 进行动画
原理：transform 和 opacity 属性的改变不会触发重排，只会触发合成层的重绘，而合成层的重绘性能开销相对较小。
实践：在实现元素的移动、缩放、旋转等动画效果时，优先使用 transform 属性。
将元素设置为绝对定位或固定定位
原理：绝对定位和固定定位的元素脱离了文档流，它们的布局变化不会影响其他元素，从而减少重排的影响范围。
实践：对于需要频繁变动位置的元素，如弹窗、提示框等，设置为 position: absolute 或 position: fixed
避免频繁读取布局信息
原理：当浏览器读取布局信息（如 offsetWidth、offsetHeight、scrollTop 等）时，为了保证信息的准确性，它会强制刷新渲染队列，立即进行重排。因此，频繁读取布局信息会导致多次重排。
实践：尽量将需要读取布局信息的操作集中进行，避免在循环中频繁读取。