重绘和回流（重排）是什么，如何避免？

重绘：当元素的外观样式发生改变，但不影响其布局时，浏览器会执行重绘操作。这意味着浏览器会重新绘制受影响的元素，以更新其可见的外观，但不会改变元素在文档流中的位置。

回流：当元素的尺寸、布局或其他影响其几何属性的属性发生变化时，浏览器会执行回流操作。回流会导致浏览器重新计算元素的布局和位置，并重新绘制受影响的部分或整个页面。

为了避免频繁的重绘和回流，可以采取以下措施：

使用 CSS3 动画：CSS3 动画利用 GPU 加速，可以更高效地实现动画效果，减少重绘和回流的次数。

批量修改样式：通过改变元素的 class 名称，一次性修改多个样式属性。这样可以减少多次重绘和回流的次数。

避免频繁操作布局属性：尽量避免直接操作影响元素布局的属性，如 width、height、font-size 等。如果需要修改布局属性，最好将操作集中在一起，或者考虑使用绝对定位来避免影响其他元素。

使用文档片段（Document Fragment）：如果需要频繁地向页面中添加大量 DOM 节点，可以先将它们添加到文档片段中，最后再统一插入文档中。这样可以减少回流的次数。

利用虚拟 DOM 技术：一些前端框架如React、Vue等都采用了虚拟 DOM 技术，可以在内存中进行修改和计算，最后再一次性更新到页面上，减少了频繁的回流和重绘操作。

使用 transform 替代 top/left：对于需要进行动画或平移的元素，使用 CSS3 的 transform 属性来替代 top/left 属性，因为 transform 的改变不会引起回流。

使用 requestAnimationFrame：对于一些需要频繁执行的 JavaScript 动画，使用 requestAnimationFrame 方法来优化动画效果，避免掉帧和浏览器频繁的重绘和回流。