在了解重绘和回流之前需要先了解一下：浏览器的渲染机制浏览器采用流式布局模型（Flow Based Layout） 浏览器会把 HTML 解析成 DOM ，把 CSS 解析成 CSSOM ， DOM 和 CSSOM 合并就 产生了渲染树（Render Tree ）。 有了RenderTree ，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
重绘
重绘的定义
一个元素外观改变触发浏览器的行为，浏览器会根据元素的新属性重新回值，使元素呈现新的外观；
通俗来说就是：某一个元素的样式改变了，虽然并不影响其在文档流中的位置，但是浏览器就会对元素进行重新绘制，这就是重绘；
重绘的触发条件
color、backgroundColor、size等改变元素外观的属性
重绘一般发生在 UI 界面；是一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重 新绘制，使元素呈现新的外观。
回流的范围：
改变外观属性的元素；
回流
回流的定义
当渲染树中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，就叫做回流（重排）。每个界面至少需要一次回流（重排）。
通俗来说就是：当增加或删除dom节点，改变元素的尺寸或者触发某些属性，引起页面结构改变时，浏览器就会重新构造dom树会重新渲染页面，这就是回流；
回流的触发条件：
任何页面布局和几何属性的改变都会触发重排。
回流的范围：
在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的 DOM 元素重新排列，它的影响范围有两种：
1、全局范围：从根节点开始，对整个渲染树进行重新布局
2、局部范围：对渲染树的某部分或者一个渲染对象进行重新布局
两者的联系：
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 节点进行操作;
