我们都知道浏览器对HTML解析生成DOM树，对CSS解析生成CSSDOM树，然后DOM树与CSSDOM树合并构建渲染树，再经过回流计算元素的形状、位置，大小，然后再经过重绘转化为屏幕上的实际像素。从中我们可以看出回流会对结构进行调整，而重绘侧重于样式上的调整，相较于回流，重绘对性能的影响较小，回流对性能影响更大。
重绘不一定会引发回流，但是回流一定会触发重绘
回流 (Reflow)
当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流
触发回流的场景
- 页面首次渲染
- 元素尺寸或位置发生改变(包括外边距、内边距、高度等)
- 元素字体大小变化
- 添加或删除可见的dom元素
- 某些属性(clientWidth、offsetWidth)
- ...
重绘 (Repaint)
当页面中元素样式的改变并不影响它在文档流中的位置时（例如color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘
触发重绘的场景
- 元素颜色、透明度的改变(color、background-color、opacity)
- text-aligin改变
- visibility:hidden
- ...
减少性能影响
- 由于每次的回流都会造成额外的消耗，因此浏览器都会通过队列化修改并对批量执行来优化重排过程，浏览器把修改的操作放入队列中，直到一段时间或者到了一个阀值才会清空队列，但是获取某些元素信息的时候队列会强制刷新(如
offsetTop、scrollTop、clientWidth等)，我们需要减少这些操作。 - 尽量避免使用
table布局。 - 避免频繁操作样式，最好一次性重写
style属。 - 隐藏元素可以使用visibility:hidden而非display:none。
- ...
