浏览器内核流程概况

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

前文中我们将「面试题」的解决方案已经全部交代了一遍&＃xff0c;同时留下了一个进一步思考的问题&＃xff1a;

Renderer Process 是如何将文档渲染出来的呢&＃xff1f;

在介绍如何渲染的问题之前&＃xff0c;我们还是需要了解一下什么是 Renderer Process&＃xff0c;即浏览器内核。

浏览器内核是由各大浏览器厂商依照 W3C 标准自行研发。因为由各大厂商自主研发&＃xff0c;必定产生不同的种类&＃xff0c;我们先来看看市面上主流浏览器内核&＃xff1a;

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

Gecko&＃xff1a;俗称 Firefox 内核&＃xff0c;Netscape6 开始采用的内核&＃xff0c;后来的 Mozilla FireFox&＃xff08;火狐浏览器&＃xff09;也采用了该内核&＃xff0c;Gecko 的特点是代码完全公开&＃xff0c;因此&＃xff0c;其可开发程度很高&＃xff0c;全世界的程序员都可以为其编写代码&＃xff0c;增加功能。因为这是个开源内核&＃xff0c;因此受到许多人的青睐&＃xff0c;Gecko 内核的浏览器也很多&＃xff0c;这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因。

Presto&＃xff1a;Opera 前内核&＃xff0c;为啥说是前内核呢&＃xff1f;因为 Opera12.17 以后便拥抱了 Google Chrome 的 Blink 内核&＃xff0c;此内核就没了寄托。

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

Blink&＃xff1a; 由 Google 和 Opera Software 开发&＃xff0c;在Chrome&＃xff08;28及往后版本&＃xff09;、Opera&＃xff08;15及往后版本&＃xff09;和Yandex浏览器中使用。Blink 其实是 Webkit 的一个分支&＃xff0c;添加了一些优化的新特性&＃xff0c;例如跨进程的 iframe&＃xff0c;将 DOM 移入 Javascript 中来提高 Javascript 对 DOM 的访问速度等&＃xff0c;目前较多的移动端应用内嵌的浏览器内核也渐渐开始采用 Blink。

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

负责显示请求的内容。如果请求的内容是 HTML&＃xff0c;它就负责解析 HTML 和 CSS 内容&＃xff0c;并将解析后的内容显示在屏幕上。

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

主流程

起先将请求的内容转化为 8Kb 的 chunks&＃xff0c;之后开始解析 HTML 文档构建 DOM 树 ->解析样式结合DOM 树构建 render tree -> 布局&＃xff08;layout&＃xff09; -> 绘制&＃xff08;painting&＃xff09;。

render tree&＃xff1a;每一个节点都是一个带有可视化样式和尺寸信息的矩形&＃xff0c;节点按照正确的顺序去排列展示的。

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

painting&＃xff1a;遍历 render tree&＃xff0c;在用户界面后端&＃xff08;UI Backend layer&＃xff09;的帮助下绘制每一个节点。

整个流程是一个逐渐的过程&＃xff0c;为了更好的用户体验&＃xff0c;需要尽快的展示内容&＃xff0c;所以在浏览器不会等所有的HTML解析完&＃xff0c;才开始构建和布局 render tree&＃xff0c;这是同步线性进行的流程。这就说明内容会在解析和展示的同时&＃xff0c;有其余内容还在网络处理中。

因浏览器内核不同&＃xff0c;所以在整个流程会有写不同&＃xff0c;我们分别看看 Webkit 和 Gecko流程&＃xff1a;

Webkit 主要流程:

Gecko 主要流程:

以上便是渲染引擎的主流程介绍&＃xff0c;但回到主流程的第一步&＃xff0c;「解析 HTML 为 DOM 树」&＃xff0c;解析是一个动词&＃xff0c;那这个动作背后的逻辑是什么呢&＃xff1f;