了解重绘和回流之前，先了解以下几个知识点

1. DOM树

DOM叫文档结构模型。浏览器把网页中的html代码解析成一个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象 。dom树里面包含了所有的html tag，包括display:none隐藏的节点，opacity:0的节点和用JS动态添加的元素等。

2. CSSOM树

CSSOM叫样式结构模型。浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式。

3. render树

DOM树和CSSOM树结合以后，就生成render树，但是render树会抛弃head节点和display:none的节点，因为这些节点都 不会参与render，所以render树中会抛弃这些节点（opacity：0的节点会保留，因为他仍然占位）

现在介绍什么叫回流和重绘：

回流

回流，也叫重排，render树，需要绘制成一张网页，那么render树中所有节点，都需要根据style中的样式，排列到网页中指定位置中去，呈现出来才是正确的网页。这个排列的过程就叫回流，也叫重排。

重绘

在render树回流的过程中，不仅需要将style中决定位置的样式排列到网页指定位置，还需要将style中决定颜色，字体，opacity显隐等这些属性渲染，使网页有颜色有样式。这一过程，就叫做重绘。

所以得出结论，重绘只是绘制改变了元素的颜色，字体等，并无元素位置的绘制。并且，render树执行回流，会自动执行重绘。

举个形象的例子，我们在学校开运动会，观众坐在看台上，有时需要用颜色板拼一些加油助威的图案，那么，观众进场按位置落座这一过程，可以理解为回流（重排），观众举起颜色板，或者更换颜色板，会生成新的图案，但是每个观众位置并没改变。这时候，可以理解为重绘。