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

[本文属原创，如有转载，请注明出处http://blog.youkuaiyun.com/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节点设置为None时，在Render树上就没有相对应的RenderObject。RenderObject对象实际上是DOM节点一个虚拟的输出，它知道如何控制DOM节点的绘制。

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

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

5.  触发load消息事件。

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