webkit技术内幕
1. 技术内幕
- 渲染：根据描述或定义构建数学模型，通过模型生成图像的过程。
浏览器的渲染引擎就是将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。
- 主流的渲染引擎包括Trident、Gecko和WebKit，它们分别是IE、火狐和Chrome的内核。
| Trident | Gecko | WebKit | |
|---|---|---|---|
| 基于渲染引擎的浏览器或者Web平台 | IE | Firefox | Safari,Chromium/Chrome,Android浏览器，ChromeOS，webOS |
- 渲染引擎提供的功能包括：
- HTML解释器
将HTML文本解释成DOM树。
- CSS解释器
为DOM中的各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础设施。
- 布局（layout）
在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型。
- JavaScript引擎
JavaScript引擎能够解释JavaScript代码并通过DOM接口和CSSOM接口来修改网页内容和样式信息，从而改变渲染的结果。
- 绘图
使用图形库将布局计算后的各个网页的节点绘制成图像结果。
-
浏览器渲染网页过程
渲染过程.png
根据上图从左到右的顺序，首先网页内容输入到HTML解释器，HTML解释器在解释它后构建成一棵DOM树，这期间如果遇到JavaScript代码则交给JavaScript引擎去处理；如果网页中包含CSS，则交给CSS解释器去解释。当DOM建立的时候，渲染引擎接收来自CSS解释器的样式信息，构建一个新的内部绘图模型。该模型交给布局模块计算模型内部各个元素的位置和大小信息，最后绘图模块完成从模型到图像的绘制。
其中虚线箭头的指向表示在渲染过程中，每个阶段可能使用到的其他模块。在网页内容下载的过程中，需要使用到网络和存储模。在计算布局和绘图的时候，需要使用2D/3D的图形模块，同时因为要生成最后的可视化结果，这时需要开始解码音频、视频和图片，同其他内容一起绘制到最后的图像中。
在渲染完成后，用户可能需要跟渲染的结果进行交互，或者网页自身有动画操作，一般而言，这需要持续的重复渲染过程。
