webkit的网页渲染过程

本文章内容参考webkit技术内幕

webkit的网页渲染过程（1）

1.加载和渲染

浏览器的主要作用就是将用户输入的“URL”转变成可视化的图像。这其中包含以下两个过程，但这两个过程也会交叉，很难有明显的区分：
（1）网页加载过程，从“URL”到构建DOM树；
（2）网页渲染过程，从DOM树到生成可视化图像。
网页渲染还有一个特性，那就是网页通常比我们的屏幕可视面积要大（在移动设备上尤其明显），当前可视化的区域，我们称为视图（viewport），因为网页比可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动条以帮助翻滚网页。就用户体验来说，垂直方向滚动效果好于水平方向。

2.webkit的渲染过程

（1）当用户输入网页URL时，webkit调用资源加载器加载该URL对应的网页。
（2）加载器依赖网络模块来建立与URL的链接，发送请求并接收URL的答复。
（3）webkit接收到各种网页或资源的数据，其中某些资源可能是同步或异步获取的。
（4）网页被交给HTML解释器转变成一系列的词语（Token）
（5）解释器根据词语构建节点（Node），形成DOM树。
（6）如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
（7）JavaScript代码可能会修改DOM树的结构。
（8）如果节点需要依赖其他资源，比如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续构建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。