webkit render tree dom tree

webkit render tree dom tree

作者: hustyiyuan    2010-05-20 01:18 星期四 晴

　　webkit 在load webpage成功后， 会启用HTMLtokenier来对此webpage进行parser， 会同时创建 dom tree和render tree。
　　1） dom tree的基本单位是node---结点，包含有整个html文档的各个tag，主要是反映整个webpage的情况，是对此webpage的一个写实；
　 　2） render tree则是dom tree的简化，其最小单元是 RenderObject； render tree中每个单元，都涉及页面中某块区域的布局和渲染，因此一些不涉及区域渲染的结点，在renderobject并不存在[如 HTMLStyleElement结点， 因为其你内容，已经被融入了render tree的叶子结点中去]
　　FYI:
　　一个dom tree保留有最全面的webpage的信息，其可对应多个render tree， 每个render tree，在layout出来效果都不一样，因此可以达到一个webpage多渲染效果的处理
　　
　 　3）Layout负责确定Render Tree中，每个叶子和中间节点的位置。每个节点在屏幕上的显示，都呈长方形格局。因此layout是真正意义上的布局，调整和确认。 layout实质的是RenderLayer Tree，这个tree是在形成render tree的时候形成的， 但render tree的每个节点，只有符合要求的才会生成对应的renderlayout 结点[可能只有叶子结点才会生出对应的renderlayout node]，

　　4） Paint过程，负责把Render Tree中各个叶子节点，在相应的位置绘制出来。因为最终只有叶子结点才会显示出来。