重绘与重排

浏览器的渲染过程： 

1. HTML被HTML解析器解析成DOM 树

2. css则被css解析器解析成CSSOM 树

3. 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)

4. 当渲染树执行完后，就要执行重排，将结构渲染出来，盒子的位置等，大小。

5. 在进行重绘，将各个节点的样式显示出来，如字体颜色，背景等等。

6. 最后发送给CPU ，显示在页面上.

                                                             图片来源于网路

当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。

重绘（repaint或redraw）：重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。触发重绘的条件：改变元素外观属性。如：color，background-color等。

重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。每个页面至少需要一次回流，就是在页面第一次加载的时候，触发重绘的条件：改变元素位置。如：display：none 等。

display：none：位置消失，导致位置发生改变，

重绘和重排的关系：重排必定会引发重绘，但重绘不一定会引发重排。