什么是重绘和回流（重排）？什么情况下会用到？如何减少

在了解重绘和回流之前需要先了解一下：

浏览器的渲染机制

浏览器采用流式布局模型（Flow Based Layout） 浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM，DOM 和 CSSOM 合并就 产生了渲染树（Render Tree）。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。

1、回流一定会触发重绘，但是重绘不一定会引起回流。

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，引发重绘。
2、改变页面布局或者大小尺寸的时候会引起回流，反之就是重绘

如何优化或减少回流和重绘：

1、集中改变样式className

2、如果需要创建多个dom节点，可以使⽤ DocumentFragment 创建完后一次性加入 document

3、将需要多次重排的元素，position 属性设为 absolute 或 fixed ，元素脱离了文档流，它的变化不会影响到其他元素

4、display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为 display：block；这样的话就只引发两次重绘和重排；

5、使用 cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

6、不要使用 table 布局， 一个小的改动可能会使整个 table 进行重新；

7、操作 DOM 时，尽量在低层级的 DOM 节点进行操作;