WebKit/Blink 渲染网页的主要步骤

[本文属原创,如有转载,请注明出处http://blog.csdn.net/yl02520/article/]

1.  发送网络资源请求。

     WebKit在渲染网页之前,首先需要从网络上下载资源文件,这里把资源文件分为两类,一类称为主资源文件,比如Frame,另外一类成为子资源文件,比如图片,JavaScript脚本,CSS脚本,字体,音频视频文件等等。以前WebKit在加载这两种资源文件时采用不同的路径,主资源文件通过DocumentLoader类来加载,子资源文件通过DocLoader类来加载。由于这两个类加载资源的主要流程是类似的,后来Google的工程师对上述流程做了重构,对它们进行了合并,所以现在在WebKit的加载流程中只有DocumentLoader类,但是给资源文件设定了优先级,主资源文件拥有最高优先级。

2.  HTML/JavaScript文件解析。

     在html文件和js文件加载完毕后,需要对它们进行解析,生成相应的HTML的组件,代码中对应为HTMLElement。

3.  生成DOM树和Render树。

     其实DOM树和Render树的生成是和HTML/JavaScript解析时同时发生的,这里单独提取出来,主要是想显示其重要性。DOM树上挂载的是DOM节点,页面上的每个HTML元素都存储成为一个DOM节点,比如body, div等。DOM树的根节点为Document节点。Render树上挂载的对象称为RenderObject,一般情况下DOM树上的每个节点对应RenderObject树上的一个节点,但是也有例外,比如某个DOM节点设置为隐藏时,在Render树上就没有相对应的RenderObject。RenderObject对象实际上是DOM节点一个虚拟的输出,它知道如何控制DOM节点的绘制。

4.  遍历DOM树和Render树生成可显示的位图。

    在WebKit中存在一个RenderLayer树,每一个RenderObject都直接或间接的与RenderLayer相关联,WebKit在渲染时,从RenderTree上从根节点开始到叶子节点,一层一层的渲染。具体过程在代码中分为两个不同的路径,一个是传统的软件渲染,另外一个是采用GPU硬件加速的渲染。

5.  触发load消息事件。

    让Web开发者得知,网页绘制完成。开发者可以利用该消息统计网页从加载到渲染完成所用的时间,该消息也常常被用在自动化测试中,查看近期的提交的代码有没有让网页的渲染时间变长,导致性能下降的问题。

WebKit/Blink 渲染网页的主要步骤

上一篇:前台技术--web页面通过JS显示当前日期


下一篇:JS Date时间格式的转换