浏览器渲染过程

浏览器的渲染过程：

第一步：html经过HTML Parser['pɑ:sə]解析为DOM tree；

第二步：css根据css规则经过css解析器解析为style Rules（CSSOM tree）；

第三步：两棵树经过attachment结合为 Render Tree（形成一棵大树,此时它还是一棵迷茫的树，不知道节点的内容和位置）；

第四步：render tree经过Layout 计算出DOM的位置以及样式；

第五步：将计算好的页面paint画出来；

第六步：显示到浏览器上；

渲染机制----重排(reflow)：浏览器根据样式计算并根据计算结果将元素放在该出现的位置的过程

渲染机制----重绘(repaint)：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上

触发 reflow:

①增删改DOM节点

②移动DOM的位置（动画）

③css修改大小以及边距

④浏览器窗口变化（resize）

外观变化都会repaint