浏览器内核及特性

webkit笔记，主要来自 朱永盛 《WebKit技术内幕》 学习笔记，转载就注明原著，该书是国内仅有的Webkit内核的书籍，学习的好导师，推荐有兴趣的朋友可以购买

在浏览器中，有一个重要的模块，它主要的作用是将页面转变成 可视化（可听话）的图像（声音）结果，这就是浏览器内核，同城，它也被称为 渲染引擎

所谓渲染，就是根据描述 或者 定义构建数学模型，通过模型生成图像的过程

浏览器的渲染引擎 就是能够 HTML/CSS/JavaScript 文本 以及相应的资源文件 转换成 图像结果的模块

如图：

            浏览器渲染引擎作用

 

渲染引擎有众多功能模块，下图分三层，最上层使用 虚线框住的是 渲染引擎 所 提供的功能

                 渲染引擎模块及其所依赖的模块

 

图中大致可以看出，一个渲染引擎主要包括 HTML解释器、CSS解释器、布局、和JavaScript引擎 等等还有绘图模块、网络没有表示出来

 

HTML解释器： 解释HTML文本的解释器，主要作用是将HTML文本解释成 DOM （文档对象模型）树，DOM 是一种文档的表示方法。

CSS解释器 ： 级联样式表的解释器，它的作用是为了DOM中各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础实施

布局  ： 在 DOM 创建后，WebKit需要将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型

JavaScript引擎： 使用JavaScript代码可以修改网页的内容，也能修改 CSS  的信息， JavaScript引擎能够解释JavaScript代码，并通过DOM 接口 和 CSSOM

                接口来修改网页内容和样式信息，从而改变渲染的结果

绘图： 使用图形库将布局计算后的各个网页的节点绘制成图像结果

 

这些模块依赖很多其他的基础模块，包括 网络，存储，2D/3D图形，音频视频 和 图片解码器。

渲染引擎中还包括如何使用这些依赖模块。例如，李雨2D/3D图形库来实现高性能网页绘制 和 网页3D渲染

 

上图从左到右 解释了 渲染引擎的核心过程，先后关系由图中实线箭头表示。

从左上角开始，首先是网页内容，输入 到 HTML解释器， HTML解释器在解释它后 构建成一棵 DOM 树

期间，如果遇到 JavaScript 代码则交给 JavaScript 引擎去处理

     如果网页中包含 CSS， 则交给 CSS 解释器去解释。

当 DOM 建立的时候，渲染引擎接受来自 CSS 解释器的样式信息，构建一个新的内部绘图模型。

该模型由布局模块计算模型内部各个元素的位置和大小信息，最后由绘图模块完成从该模型到绘图的绘制

图中虚线箭头表示在渲染过程中，每个阶段可能使用到其他模型。

网页下载会使用到网络和存储

计算布局和绘图使用 2D/3D的图像模块，同时因为要生成最后的可视化结果，这是需要开始解码音频、视频和图片，同其他内容一起绘制到最后的图像中