一 HTML 文档的解析

1、当用户输入网页 url 的时候，webkit 调用其资源加载器加载该 url 对应的网页。

2、加载器依赖网络模块建立连接，发起请求并接收答复。

3、webkit 接收到各种网页或者资源的数据，其中某些资源可以是同步或者异步获取的。

4、网页被交给 html 解析器转变成一系列的词语（token）。

5、解析器根据词语构建节点（node），形成 dom 树。

6、如果节点是 javascript 代码的话，调用 javascript 引擎解释并执行。

7、javascript 代码可能会修改 dom 树的结构。

8、如果节点需要依赖其他资源，例如图片、css、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前 dom 树的继续创建；如果是 javascript 资源 url （没有标记异步），则需要停止当前 dom 树的创建，直到 javascript 的资源加载并被 javascript 引擎执行后才继续 dom 树的创建。

在上述的过程中，网页的加载和渲染过程种会发出“DOMConent”事件和 dom 的“onload” 事件，分别发生在 dom 树构建完之后，以及 dom 树建完并且网页所依赖的资源都加载完之后发生，因为某些资源的加载并不会阻碍 dom 树的创建，所以这两个事件多数时候不是同时发生的。

二 CSS 文件的解析

接下来是 webkit 利用 css 和 dom 树构建 RenderObject 树直到绘图上下文。

这一阶段的具体过程如下。

1、css 文件被 css 解释器解释成内部表示结构。

2、css 解释器工作完成之后，在 dom 树上附加解释后的样式信息，这就是 RenderObjcet 树。

3、RenderObjcet 节点在创建的同时，webkit 会根据网页的层次结构创建 RenderLayer 树，同时构建一个虚拟的绘图上下文。

如下图所示：

从CSS和DOM树到绘图上下文

RenderObjcet 树的建立并不表示 dom 树会被销毁，事实上，上述图中的四个内部表示结构一直存在，直到网页被销毁，因为它们对于网页的渲染起了非常大的作用。

三生成最终绘制的图像

最后就是根据绘图上下文来生成最终的图像，这一过程主要依赖 2D 和 3D 图形图，如下图：

从绘图上下文到最终的图像

图中这一阶段对应的具体过程如下：

1、绘制上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类。

2、绘图实现类也可以有简单的实现，也可能有复杂的实现。

3、绘图实现类将 2D 图形库或者 3D 图形库绘制的结果保存下来，交给浏览器来同浏览器界面一起显示。

这一过程实际上可能不像图中描述的那么简单，现代浏览器为了绘图上的高效性和安全性，可能会在这一过程中引入复杂的机制。而且，绘图也从之前单纯的软件渲染，到现在的 GPU 硬件渲染，混合渲染模型等方式。

上面介绍的是一个完整的渲染过程。现代网页很多是动态网页，这意味着在渲染完成之后，由于网页的动画或者用户的交互，浏览器其实一直在不停地重复执行渲染过程。

从以上内容可以得出为什么页面在引入 js 的时候最好是放在 body 的最后，而引入 css 的时候却无任何要求。因为 css 在解析时不会修改 dom 树的结构，所以完全可以和 html 的解析同时执行，但是 js 的解释执行却会修改 dom 树的结构，所以 js 的解释执行和 html 的解释执行是阻塞进行的。为了加快 html 页面的显示，最好将 js 的引入放在 body 的最后。

四参考资料

《webkit技术内幕》

webkit页面渲染

webkit页面渲染

关于作者 📝

目录

评论