基础
浏览器内核及其特性
在浏览器中，有一个重要的模块，他主要的作用是将页面转化为可视化的图像结果，这就是浏览器内核，通常他被称为渲染引擎，所谓的渲染就是根据描述或者定义构建数学模型，通过模型生成图像的过程，浏览器的渲染引擎就是能够将HTML/CSS/JavaScript文本以及其他相应的资源文件转化成图像结果的模块
如下图
目前主流的渲染引擎包括Trident/Gecko/webkit 分别是IE/火狐/chrome的内核
渲染引擎模块及其依赖的模块
渲染引擎的渲染过程
HTML网页和结构
HTML网页是利用HTML语言编写的文档，他是一种半结构化的数据表现形式，它的结构特征可以归纳为三种：树状结构、层次结构和框结构
框结构
框结构很早被引入网页中，他可以用来对网页的布局进行分割，将网页分割为几个框，同时网页开发者也可以让网页嵌入其他的网页，对应的html标签frameset,frame,iframe
每一个框结构包含一个HTML文档，最简单的框结构网页是一个单一的框，其文档中不包含任何其他的框
层次结构
指网页中的元素可能分布在不同的层次当中，也就是说某些元素可能不同于它的父元素所在的层次，如下图所示
当一个网页构建层次结构的时候，首先是根节点，也就是根层，
其次当有元素video存在是，会创建一个层，这是因为video元素用来播放视频，为他创建一个层可以更加有效的处理视频解码器和浏览器之间的交互和渲染问题
再次当存在div元素时，如果这个元素存在3D变换时，也会构建一个层
最后当存在canvas元素时，也会构建一个层，用户执行绘图操作
网页渲染过程
- 加载过程 从url输入到构建DOM树
- 渲染过程 从DOM树生成可视化图形
具体过程
根据数据的流向，渲染过程可以分解为3个阶段
从输入URL到构建DOM树
- 输入url,webkit调用器资源加载器加载对应的网页
- 加载器依赖网络模块建立连接，发送请求并接收答复
- webkit接收各种网页或者资源的数据，可能是同步也可能是异步
- 网页交给HTML解释器转换成一系列的词语Token
- 解释器根据Token构建节点形成dom树
- 如果节点是js调用js引擎解释并执行
- 如果节点依赖其他资源，调用加载器来加载
从DOM树到构建完webkit的绘图上下文
- css文件被css解释器解释成为内部表示结构
- css解释器工作完之后，在DOM树上附加解释猴的样式信息，这就是renderobject树
- 创建渲染节点的同时，webkit根据网页的层次结构构建渲染层树，同时构建一个虚拟的绘图上下文
从绘图上下文到生成最终可视化图像
- 绘图上下文是一个与平台无关的抽象类，他将每个绘图操作桥接到不同的具体实现类，
- 绘图实现类实现具体的绘制工作
- 将绘制结果保存下来，交给浏览器同浏览器界面一同显示
