渲染引擎主要包括HTML解释器、CSS解释器、布局和JavaScript引擎、绘图模块等。HTML解释器解释HTML文本的解释器，主要作用是将HTML文本解释成DOM（文档对象模型）树，DOM是一种文档的表示方法。CSS解释器的作用是为DOM中的各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础设施。布局是在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型。JavaScript引擎使用JavaScript代码可以修改网页的内容，也能修改CSS的信息，JavaScript引擎能够解释IavaScript代码并通过DOM接口和CSS DOM接口来修改网页内容和样式信息，从而改变渲染的结果。绘图使用图形库将布局计算后的各个网页的节点绘制成图像结果。
HTML结构
HTML是半结构化的数据表现方式，它的结构特征可以归纳为：树状结构、层次结构和框结构。
树状结构
整个网页可以看成一种树状结构，树根是html。根下面也包含两个子节点head和body。head的子女style包含的是一段CSS代码，用来定义元素的样式信息。body节点下面包含三个子节点，其一是img节点，用来在网页中显示图片资源；其二是div节点；其三是script节点，它包含一段JavaScript代码。
<html>
<head>
<style type="text/css"> <!-- CSS代码 -->
img { width: 100px; }
</style>
<title>This is a simple case.</title>
</head>
<body>
<img src="apic.png"></img>
<div>Hello world!</div>
<script type="text/javascript">
window.onload = function(){
console.log("window.onload()");
}
console.log("It's me.");
</script>
</body>
</html>
框结构
框结构很早就被引入网页中，它可以用来对网页的布局进行分割，将网页分成几个框。同时，网页开发者也可以让网页嵌入其他的网页。在HTML语法中，frameset、frame和iframe可以用来在当前网页中嵌入新的框架。每个框结构包含一个HTML文档，最简单的框结构网页就是单一的框，其文档没有包含任何其他的框。
层次结构
网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层次，因为某些原因，WebKit需要为该元素和它的子女建立一个新层。
网页通常比我们的屏幕可视面积要大，而当前可见的区域，称为视图(viewport)。因为网页可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动条以帮助翻滚网页。
WebKit渲染过程数据包括网页内容、DOM、内部表示和图像，模块包括HTML解释器、CSS解释器、JavaScript引擎以及布局和绘图模块。根据数据的流向，这里将渲染过程分成三个阶段，第一个阶段是从网页的URL到构建完DOM树，第一个阶段是从DOM树构建完WebKit的绘图上下文，第三个阶段是从绘图上下文到生成最终的图像。
从网页URL到构建完DOM树：
- 当用户输入网页URL的时候，WebKit调用其资源加载器加载该URL对应的网页。
- 加载器依赖网络模块建立连接，发送请求并接受答复。
- WebKit接受到各种网页或资源的数据，其中某些资源可能是同步或异步获取的。
- 网页被交给HTML解释器转变成一系列的词语Token。
- 解释器根据词语构建节点Node，形成DOM树。
- 如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
- JavaScript代码可能会修改DOM树的结构。
- 如果节点需要依赖其他资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。
在上述过程中，网页在加载和渲染过程中会发出DOMContent事件和DOM的onload事件，分别在DOM树构建完之后，以及DOM树构建完并且网页所依赖的资源都加载完之后发生，因为某些资源的加载并不会阻碍DOM树的创建，所以这两个事件多数时候不是同时发生的。
WebKit利用CSS和DOM树构建RenderObject树直到绘图上下文：
- CSS文件被CSS解释器解释成内部表示结构
- CSS解释器工作完成之后，在DOM树上附加解释后的样式信息，这就是RenderObject树
- RenderObject节点在创建的同时，WebKit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。
根据绘图上下文 生成最终图像：
- 绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类。
- 绘图实现类也可能有简单的实现，也可能有复杂的实现。在Chromium中它的实现相当复杂，需要Chromium合成器来完成复杂的多进程和GPU加速机制。
- 绘图实现类将2D图形库或者3D图形库绘制的结果保存下来，交给浏览器来同浏览器界面一起显示。
转载：https://blog.csdn.net/asmartkiller/article/details/101672070