重绘和回流有什么区别（CSS）

重绘与回流事前端中经常提及的词汇，而具体重绘和回流分别做了哪些事情，他们两者之间的区别又是什么呢？

一：首先我们要了解HTML的加载过程

我们先看一下下面这张图：

具体做了哪些操作呢？

1.解析HTML，生成DOM树，然后也会解析CSS，生成CSSOM树就如上六边形；

2.将DOM树和CSSOM树结合，生成渲染树(Render Tree)，这一过程称为Attachment，渲染树并不等同于Dom树，因为像head标签 或 display: none这样的元素就没有必要放到渲染树中了，但是它们在Dom树中；

3.Layout(回流):对渲染树进行布局，定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫layout

4.Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

5.绘制渲染树，调用操作系统底层API(UI Backend)进行绘图操作（这个步骤比较复杂有兴趣的同学可以去深入了解）。

构建渲染树是从DOM树的根节点开始遍历每个可见节点，然后对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。但是这里并不是每一个节点都是可见的!例如：script、meta、link的标签，css的样式display:none，注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。

二：什么是回流

当render tree中的因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(Reflow)。而每个页面至少会进行一次回流，在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建Render Tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。具体引起回流的点如下：

1、添加或者删除可见的DOM元素；

2、元素位置改变；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时，因为回流是根据视口的大小来计算元素的位置和大小的；

三：什么是重绘

完成回流后，浏览器会重新绘制受影响的部分到屏幕中，当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

四：重绘与回流的区别

回流必将引起重绘，而重绘不一定会引起回流，这个是一个关键点，只有颜色改变的时候就只会发生重绘而不会引起回流，回流往往伴随着布局的变化，代价较大，重绘只是样式的变化，结构不会变化

五：如何性能优化? 尽量减少重绘与回流的次数

1.减少Dom的增删行为

比如你要删除某个节点，给某个父元素增加子元素，这类操作都会引起回流。如果要加多个子元素，最好使用documentfragment

2.样式集中改变

在一些元素宽高变了，border变了，字体大小变了等这个时候都会引起回流，这个时候我们可以给相同操作的给一个className，这样就只会有一次的回流，少用style设置样式。

3.使用脱离文档流的方法改变位置

将position属性设置为absolute或fixed，position属性为absolute或fixed的元素等方法属于脱离文档流，不会频繁的产生回流

4.避免循环读取offsetLeft等属性。在循环之前把它们存起来。

例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。