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

[baixiaoji]

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 树」，解析是一个动词，那这个动作背后的逻辑是什么呢？