28.Learning-浏览器渲染流程

1、使用html解析器将html页面转换成浏览器能够理解的DOM树 parseHtml

2、将css解析成CSS 树 parseStylesheet

3、样式计算computedStyle

4、DOM树+CSS 树 = 生成布局树(只包含页面上能显示的内容，不能显示的不会出现)此时页面没有渲染，只是确认了位置关系，并没有真正进行加载

5、根据布局树生成图层树UpdateLayerTree更新图层树，在浏览器的工具栏Layers可以看到效果。

6、绘制Paint每增加一个图层会出现一个绘制，生成最终的页面

7、组合图层，生成最终页面

哪些元素可以生成图层呢？

1、css 3d、position:fixed、video、canvas、css3 动画的节点（animate、一旦动画执行完毕就不再是一个单独的图层了）

重绘和重排

重绘->更新元素的几何属性->发生在布局阶段layout

重排->Paint阶段->交给GPU来做，渲染效率比较高
详细浏览器渲染流程