前端的重绘和回流

前端的重绘和回流是浏览器渲染页面时的两个重要概念

浏览器在生成页面时，会解析html文件生成dom树，然后浏览器主线程会解析css并确定每个dom节点的样式（位置，大小等），在知道dom树和节点样式后，主线程根据遍历dom和计算好的样式，来生成layout tree渲染页面(Layout布局)，重绘和回流都会导致layout重新计算

重绘是什么

重绘（Repaint）：当元素的样式（例如背景色、字体颜色等）发生改变，但并不影响其几何属性时，浏览器会将该元素的内容重新绘制一遍，这个过程就是重绘。

回流是什么

回流（Reflow）：当元素布局和几何属性发生改变时，例如改变元素的位置、大小，添加、删除元素等操作，浏览器需要重新计算元素的位置和大小，以及页面上其他元素的相对位置，这个过程就是回流。每当发生回流时，都会导致重绘，因为回流后元素的位置和大小改变了，需要重新绘制，这个过程也称为重排。

优化重绘和回流的方法：

1. 使用 CSS3 中的 transform 属性代替修改元素的位置，宽高等属性；

2. 使用requestAnimationFrame 方法优化动画渲染，将多次重绘和回流合并成一次调用；

3. 尽可能减少对 DOM 的操作，尽量缓存 DOM 对象，避免重复查询；

4. 批量修改 DOM，将多个修改合并成一次操作，一次触发回流和重绘；

5. 尽量使用class代替style，使用类名去操作元素的样式，避免直接操作样式；

6. 避免使用table布局，table布局很难避免回流的发生；

7. 使用文档碎片（DocumentFragment）操作 DOM，将元素先添加到文档碎片中，最后一次性添加到文档中，避免多次重绘和回流。

总结：重绘和回流是非常消耗性能的操作，特别是当页面中的元素数量较多或者频繁发生更改时，会严重影响页面性能，导致页面变慢或卡顿