HTML页面重绘和重排（回流）

HTML页面重绘和重排（回流）

##浏览器运行机制
1.构建DOM树（ parse )

渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树

2.构建渲染树（construct）

解析对应的CSS样式文件信息，构建渲染树，每一个NODE都有自己的style，render tree不包含隐藏的节点，因为这些节点不会用于呈现。

3.布局渲染树（reflow/layout）

从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上的精确坐标.

4.绘制渲染树(paint/repaint)

遍历渲染树，使用UI层来绘制每个节点.

重绘（repaint redraw)

当盒子的位置、大小及其他属性确定下来之后，浏览器便将这些原色都按照各自的特性再次绘制，将内容呈现在页面上，
 重绘是指一个元素外观的改变所触发的浏览器行为。
触发条件：改变元素外观

重构

因为规模尺寸大小、布局、隐藏等改变而重新构建，就为重构。

重构与重绘的关系
重排必定触发重构

##优化
减少对渲染树的操作，合并多次的DOM和样式的修改，并减少对style样式多的请求
1.直接改变元素的className
2.先设置display:none，进行页面布局，设置后再设置为block
3.使用cloneNode 和 replaceChild 触发一次回流和重绘
4.将多次重排的元素 position设置为absolute \fixed 使其脱离文档流
5.创建多个DOM节点，可以使用DocumentFragment创建后一次性加入document