回流 与 重绘

浏览器的渲染过程：

具体过程：

1.  浏览器回把html解析成DOM树，DOM树的构建是一个深度遍历的过程（当前节点的所有子节点遍历完成才会去构建当前节点的下一个兄弟节点）

2.  在构建DOM树的同时，浏览器也会把CSS解析成 CSS树

3. 合并DOM树和CSS树，生成render树（注：在这个过程，浏览器会自动忽略  head 元素，以及 display 属性值为none的元素）

4.  浏览器在拿到 render 树后，计算出每个节点在屏幕中的位置。（这个过程是完成回流的过程）

5.  遍历render树，并且根据css的设置元素的外观风格（eg:color, background-color...）（这个过程就是完成重汇的过程）

回流 与 重绘

注意：

    display: none  与  visibility: hidden  虽然都是隐藏元素。但前者是使元素从dom结构中消失，后者是dom中依然存在只是不在界面显示，所以前者为回流（需要改变dom结构），后者为重绘

回流的发生

1. 修改元素的数量

2. 改变元素的位置

3. 改变元素的大小：

   1>.  修改边距（padding）

   2>.  修改边框粗细（border）

   3>. 宽度和高度（width，height）

   4>. 填充内容大小引起的元素width，height的改变

4、页面渲染初始化

5、浏览器窗口尺寸改变（以及改变offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight这一系列属性）

参考文章： http://www.css88.com/archives/4996