浏览器内核-流程概况

3-浏览器内核-流程概况

前文中咱们将「面试题」的解决方案已经所有交代了一遍，同时留下了一个进一步思考的问题：

Renderer Process 是如何将文档渲染出来的呢？

在介绍如何渲染的问题以前，咱们仍是须要了解一下什么是 Renderer Process，即浏览器内核。

浏览器内核是由各大浏览器厂商依照 W3C 标准自行研发。由于由各大厂商自主研发，一定产生不一样的种类，咱们先来看看市面上主流浏览器内核：

Trident：俗称 IE 内核，也被叫作 MSHTML 引擎，目前在使用的浏览器有 IE11 -，以及各类国产多核浏览器中的IE兼容模块。另外微软的 Edge 浏览器再也不使用 MSHTML 引擎，而是使用类全新的引擎 EdgeHTML。

Gecko：俗称 Firefox 内核，Netscape6 开始采用的内核，后来的 Mozilla FireFox（火狐浏览器）也采用了该内核，Gecko 的特色是代码彻底公开，所以，其可开发程度很高，全世界的程序员均可觉得其编写代码，增长功能。由于这是个开源内核，所以受到许多人的青睐，Gecko 内核的浏览器也不少，这也是 Gecko 内核虽然年轻但市场占有率可以迅速提升的重要缘由。

Presto：Opera 前内核，为啥说是前内核呢？由于 Opera12.17 之后便拥抱了 Google Chrome 的 Blink 内核，此内核就没了寄托。

Webkit：Safari 内核，也是 Chrome 内核原型，主要是 Safari 浏览器在使用的内核，也是特性上表现较好的浏览器内核。也被大量使用在移动端浏览器上。

Blink： 由 Google 和 Opera Software 开发，在Chrome（28及日后版本）、Opera（15及日后版本）和Yandex浏览器中使用。Blink 实际上是 Webkit 的一个分支，添加了一些优化的新特性，例如跨进程的 iframe，将 DOM 移入 JavaScript 中来提升 JavaScript 对 DOM 的访问速度等，目前较多的移动端应用内嵌的浏览器内核也渐渐开始采用 Blink。

在浏览器架构-原理篇的部分，咱们已经给出来渲染引擎相关的定义。

负责显示请求的内容。若是请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

从定义中得出，其主要核心做用是将请求内容显示在浏览器的窗口中。而咱们知道请求内容的种类较多，可是渲染引擎默认展现是 HTML 文档、XML 文档和图片，再有插件支持的状况下方可支持其余的资源，如 pdf等类。

主流程

起先将请求的内容转化为 8Kb 的 chunks，以后开始解析 HTML 文档构建 DOM 树 ->解析样式结合DOM 树构建 render tree -> 布局（layout） -> 绘制（painting）。

render tree：每个节点都是一个带有可视化样式和尺寸信息的矩形，节点按照正确的顺序去排列展现的。

layout：该部分目的就是计算出每个节点的在屏幕上正确的位置。

painting：遍历 render tree，在用户界面后端（UI Backend layer）的帮助下绘制每个节点。

整个流程是一个逐渐的过程，为了更好的用户体验，须要尽快的展现内容，因此在浏览器不会等全部的HTML解析完，才开始构建和布局 render tree，这是同步线性进行的流程。这就说明内容会在解析和展现的同时，有其他内容还在网络处理中。

因浏览器内核不一样，因此在整个流程会有写不一样，咱们分别看看 Webkit 和 Gecko流程：

Webkit 主要流程:

Gecko 主要流程:

以上即是渲染引擎的主流程介绍，但回到主流程的第一步，「解析 HTML 为 DOM 树」，解析是一个动词，那这个动做背后的逻辑是什么呢？

下一篇文章

解析-理论剖析