回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。
重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。
重绘不一定导致回流，回流一定会导致重绘。硬要比较的话，回流比重绘做的事情更多，带来的开销也更大。但这两个都会耗费性能的，所以我们在开发中，要从代码层面出发，尽可能把回流和重绘的次数最小化。
哪些实际操作会导致回流与重绘：
1、添加、删除元素(回流+重绘)
2、隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
3、移动元素，如改变top、left或移动元素到另外1个父元素中(重绘+回流)
4、改变浏览器大小(回流+重绘)
5、改变浏览器的字体大小(回流+重绘)
6、改变元素的padding、border、margin(回流+重绘)
7、改变浏览器的字体颜色（只重绘，不回流）
8、改变元素的背景颜色（只重绘，不回流）
最耗费性能的操作：改变 DOM 元素的几何属性
耗费性能的操作：改变 DOM 树的结构，节点的增减、移动等操作。
当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，需要通过即时计算得到，所以也进行回流（重排）
如何规避回流与重绘
1、避免逐条改变样式，使用类名去合并样式
2、将“导火索”缓存起来，避免频繁改动
3、将 DOM “离线”
4、Flush 队列（浏览器自己缓存了一个 flush 队列，把我们触发的回流与重绘任务都塞进去，待到队列里的任务多起来、或者达到了一定的时间间隔，或者“不得已”的时候，再将这些任务一口气出队。）
参考链接：https://www.jianshu.com/p/938e4988aa08
参考链接：https://blog.csdn.net/zhouziyu2011/article/details/70665866