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)。
3-浏览器内核-流程概况
前文中我们将「面试题」的解决方案已经全部交代了一遍,同时留下了一个进一步思考的问题:
在介绍如何渲染的问题之前,我们还是需要了解一下什么是 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 文档、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 树」,解析是一个动词,那这个动作背后的逻辑是什么呢?