renderTree渲染

在这一步，需要把dom树和cssom树给结合起来，生成一棵完整的RenderTree。

RenderTree其实很简单，就是遍历dom树，对于每个dom节点，放到cssom树上匹配，最后找到对应的唯一一条规则，附加上去。

 

举个栗子，

body{

    div{

        span{xxxxxx}

   }

}

cssom树如下：

假设现在要生产renderTree的span节点，

首先从cssom找到所有span，然后判断他们的父类是不是div，ok是div，那么继续向上，找到head和body，ok需要的是body，取出来，attch到rendertree上面。

【不必再去匹配css样式了，因为cssom就是css样式的转换结果了】

 

渲染树布局

布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

对布局好的RenderTree进行布局，根据当前的盒模型，css样式的w和h，等等，计算出每个盒子应该摆放的位置。注意，这个时候，还没开始渲染，也就是说这个时候，还是空白的。

 

 

 

 

渲染树绘制

在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。