【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系

       在DOM树构建的同时，浏览器会构建渲染树（render tree）。渲染树的节点（渲染器），在Gecko中称为frame，而在webkit中称为renderer。渲染器是在文档解析和建立DOM节点后建立的，会计算DOM节点的样式信息。

       在webkit中，renderer是由DOM节点调用attach()方法建立的。attach()方法计算了DOM节点的样式信息。attach()是自上而下的递归操做。也就是说，父节点老是比子节点先建立本身的renderer。销毁的时候，则是自下而上的递归操做，也就是说，子节点老是比父节点先销毁。

       若是元素的display属性被设置成了none，或者若是元素的子孙继承了display:none，renderer不会被建立。节点的子类和display属性一块儿决定为该节点建立什么样的渲染器。可是visibility：hidden的元素会被建立。

       在webkit中，根据display属性的不一样，建立不一样的renderer，好比：

       (1) display:inline，建立的是RenderInline类型。

       (2) display:block，建立的是RenderBlock类型。

       (3) display:inline-block，建立的是RenderBlock类型。

       (4) display:list-item，建立的是RenderListItem类型。

       position:relative和position:absolute的元素在渲染树中的位置与DOM节点在DOM树中的位置是不同的。

      

       DOM树和渲染树的对应关系以下图：

【参考资料】

 1 浏览器的工做原理 http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_main_flow

 2 Webkit的渲染基础 http://www.ituring.com.cn/article/40625#footer