欢迎使用优快云-markdown编辑器

浏览器在构建DOM树的同时也在构造另外一棵树-Render Tree ,DOM树为Javascript提供了一系列的访问接口（DOM API），但这棵树是不对外的。它的主要作用就是把HTML按照一定的布局与样式显示出来，用到了CSS的相关知识。从MVC的角度看，可以将Render Tree 看成是V, DOM树看成是M,C则是具体的调度者，比如HTMLDocumentParser等。
Render树
每一个Render树的节点称之为renderer或者render object，查看Webkit的源码我们可以发现Renderer 一个基础的类定义，这个类是所有renderer对象的基类

    class  RenderObject {
        virtual void layout();
        virtual void paint(PaintInfo);
        virtual void rect repaintRect();
        Node* node; //the DOM node
        RenderStyle* style; //the computed style
        RenderLayer* containgLayer; //the containing z-index layer
    }

　　从中我们可以发现renderer包含了一个dom对象以及为其计算好的样式规则，提供了布局以及显示方法。具体效果图如下：（firefox的Frames对应renderers,content对应dom）