【译】解密 Quantum：现代浏览器引擎的构建之道

• 原文地址：Quantum Up Close: What is a browser engine?
• 原文做者：本文已得到原做者 Potch 受权
• 译文出自：掘金翻译计划
• 译者：吃土小2叉
• 校对者：AceLeeWinnie、yzgyyang、薛定谔的猫

解密 Quantum：现代浏览器引擎的构建之道

2016 年 10 月，Mozilla 公布了 Quantum 项目 —— 旨在开创下一代浏览器引擎。如今这一项目已然步入正轨。实际上，咱们在上个月刚更新的 Firefox 53 中首次包含了 Quantum 的部分核心代码 。

可是，咱们意识到对于那些不从事浏览器开发的人来讲（并且是大多数人），很难明白这些改动对于 Firefox 的重大意义。毕竟，许多改动对于用户来讲是不可见的。

意识到这点后，咱们开始撰写一系列博客文章来深度解读 Quantum 项目正在作什么。咱们但愿这一系列的文章可以帮助你们理解 Firefox 的工做原理，以及 Firefox 是如何打造一款下一代浏览器引擎，从而更好地利用现代计算机的硬件性能。

做为这系列文章的第一篇，最好仍是先说明一下 Quantum 正在改变哪些核心内容。

浏览器引擎是什么？它的工做原理又是什么？

那么，就从头开始提及吧。

Web 浏览器是一种软件，它首先加载文件（一般这些文件来自于远程服务器），而后在本地显示这些文件，而且容许用户交互。

Quantum 是项目的代号，Mozilla 启动这个项目是为了大幅度升级 Firefox 浏览器的某个模块，这个模块决定了浏览器如何根据远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”，若是没有浏览器引擎，用户就只能看看网站源代码而不能浏览网站了。Firefox 的浏览器引擎叫 Gecko。

能够简单地把浏览器引擎看做一个黑盒（有点相似于电视机），灌入数据后由黑盒来决定展现在屏幕上的数据形态。如今的问题是：浏览器引擎是如何呈现页面的？它是经过哪些步骤将数据转化为咱们所看见的网页？

网页数据一般有许多类型，但总的来讲能够划分为三大类：

• 用于描述网页结构的代码
• 用于提供样式的代码，描述了网页结构的视觉外观
• 用于控制浏览器行为的脚本代码，包括：计算、人机互动以及修改已初始化的网页结构和样式。

浏览器引擎将页面结构和样式结合从而在屏幕上渲染出网页，同时肯定能够互动的内容。

这一切要从网页结构提及。浏览器会根据给定的地址去加载一个网站。这个地址指向的是另外一台电脑，当它收到访问请求时，会返回网页数据给浏览器。至于这个过程的具体实现能够查阅这篇文章，反正最后浏览器拿到网页数据了。这个数据以 HTML 的格式返回，它描述了网页的结构。那么浏览器又是如何读懂 HTML 的呢？

浏览器引擎包含一类称为解析器的特殊模块，它将数据从一种格式转换为另外一种能够存储在浏览器内存中的格式。举个例子，HTML 解析器拿到了如下 HTML 内容：

<section>
 <h1 class="main-title">Hello!</h1>
 <img src="http://example.com/image.png">
</section>复制代码

因而，解析器开始解析、理解 HTML，下面是解析器的独白：

嗯，这里有个章节。在这个章节里有个一级标题，这个标题包含的文本内容是 “Hello!”。另外在这个章节中，还有一张图片。这个图片的数据从这里获取：example.com/image.png

网页在浏览器内存中的结构被称为文档对象模型，简称 DOM。DOM 以元素树的形式来表示页面结构，而非长文本形式，包括：每一个元素各自的属性以及元素间的嵌套关系。

A diagram showing the nesting of HTML elements

除了用于描述页面结构，HTML 一样包含指向样式文件和脚本文件的地址。浏览器发现这些后，就开始请求并加载数据。而后浏览器会根据数据的类型，指定相应的解析器来处理。脚本文件能够在 HTML 文件解析的同时，改变页面的结构和样式。而样式规则，CSS， 在浏览器引擎中发挥如下做用。

关于样式

CSS 是一门编程语言，开发者能够借助 CSS 描述页面元素的外观。CSS 全称 Cascading Style Sheets （译注：层叠样式表），之因此这样命名是由于多个 CSS 指令能够做用在同一个元素上，后定义的指令能够覆盖以前定义的指令，权重高的指令能够覆盖权重低的指令（这就是层叠的概念）。下面是一些 CSS 代码。

section {
  font-size: 15px;
  color: #333;
  border: 1px solid blue;
}
h1 {
  font-size: 2em;
}
.main-title {
  font-size: 3em; 
}
img {
  width: 100%;
}复制代码

大部分 CSS 代码被分割在称为规则的一个个分组中，每条规则包含两个部分。其中一个部分是选择器，选择器描述了 DOM 中须要应用样式的元素（上文说过，还记得吗？）。另外一部分则是一系列样式声明，应用于与选择器匹配的元素。浏览器引擎中包含一个名为样式引擎的子系统，用于接收 CSS 代码，并将 CSS 规则应用到由 HTML 解析器生成的 DOM 中。

举个例子，在上述 CSS 中，咱们有一条规则指定了选择器 “section”，这会匹配到 DOM 中全部 section 元素。接着，浏览器引擎会为 DOM 中的每个元素附上样式注解。直到最后每一个 DOM 元素都应用了样式，咱们将该状态称为元素样式计算完毕。而当多个选择器做用在一个元素上时，源代码次序靠后的或者权重更高的 CSS 规则最终会应用到元素上。能够认为样式表是层叠的薄透写纸，上层覆盖下层，但同时也能让下层透过上层显示出来。

一旦浏览器引擎计算好了样式，接下来就要派上用场了！布局引擎接下来会接手 DOM 和已计算的样式，而且会考虑待绘制布局所在的窗口大小。而后布局引擎会分析该元素应用的全部样式，并经过各类算法将每一个元素绘制在一个个内容盒子中。

页面布局绘制完毕后，是时候将页面蓝图转化成你所看见的实际页面了。这一步骤称为 painting（绘制），这也是先前全部步骤的最终整合。每一个由布局定义的内容盒子都将被绘制，其内容来自 DOM，其样式源自 CSS。最终，从代码一步步重组而成的页面，展示在用户眼中。

以上就是之前的浏览器引擎所作的事情。

当用户滚动页面的时候，浏览器会进行重绘来显示原先在可见窗口外的页面内容。然而，显然用户都喜欢滚动页面！浏览器引擎清楚地意识到本身确定会被要求展现初始窗口之外的内容（也称视口）。现代浏览器根据这个事实在页面初始化的时候绘制了比视口更多的页面内容。当用户滚动页面的时候，这部分用户想要看的内容早就已经绘制完毕了。这样的好处就是页面滚动变得更快更流畅。这种技术是网页合成的基础，合成是一种减小所需绘制量的技术术语。

另外，咱们有时候也须要重绘部分页面内容。好比用户有可能正在观看一个每秒 60 帧的视频。也可能页面上有一个图片轮播或者滚动列表。浏览器可以检测出页面上哪一部份内容将要移动或者更新，而且会为这些更新的内容建立一个新的图层，而非从新渲染整个页面。一个页面能够由多个彼此重叠的图层构成。每一个图层均可以改变定位方式、滚动位置、透明度或者在不触发重绘的前提下控制图层的上下位置！至关方便。

有时候一些脚本或者动画会修改元素的样式。这个时候，样式引擎就须要从新计算这个元素的样式（可能页面上许多其余元素也要从新计算），从新计算布局（产生一次回流），而后重绘整个页面。随着计算量的增长，这些操做会耗费不少时间，但只要发生的频率低，那么就不会对用户体验产生负面影响。

在现代 web 应用中，文档结构常常会被脚本改变。而哪怕只是一点小改动，都会或多或少地触发整个渲染流程：HTML 解析成 DOM、样式计算、回流、重绘。

Web 标准

不一样浏览器解释 HTML、CSS 和 JavaScript 的方式也不同。这就产生了各类影响：小到细微的视觉差别，大到用户没法在某些浏览器上正常浏览网站。近年来在现代互联网中，大多数网站在不一样浏览器下彷佛都表现的不错，并且也没有关注用户具体使用的是什么浏览器。那么，不一样浏览器又是如何达到这种程度的一致性体验呢？

网站代码的格式，以及代码的解释规则、页面的渲染规则都是由一种由多方承认的文件定义的，即 Web 标准。来自浏览器厂商、Web 开发者、设计师等行业成员的表明组成的委员会制定了这些标准文档。他们一块儿肯定了对于给定的代码片断，浏览器引擎应该显示的明确行为。Web 标准包括 HTML、CSS 和 JavaScript 标准以及图像、视频、音频等数据格式的标准。

为何说 Web 标准是重要的？由于只要保证遵循了 Web 标准，就能够开发出一个全新的浏览器引擎，这个引擎能够处理互联网上数以亿计的网页，并绘制出和其它浏览器同样的结果。这也意味着在某些浏览器中才能运做的“秘密配方”再也不是秘密了（译者注：例如，再也不须要 CSS 私有前缀）。另外，正由于 Web 标准的存在，用户能够凭本身的喜爱挑选浏览器。

摩尔定律的终结

过去，人们只有台式电脑。曾经有一个相对保守的假设：计算机只会变得更快更强大。这个想法是基于摩尔定律的推测：集成电路上可容纳的元器件的数目，约每隔 2 年便会增长一倍（所以半导体芯片的性能也将提高一倍、体积也将缩小一倍）。使人难以置信的是，这种趋势一直持续到了 21 世纪，而且有人认为这必定律仍然适用于当今最前沿的研究。那么为何在过去十年中，计算机的平均运算速度彷佛已经趋于稳定了？

顾客买电脑的时候不仅仅考虑运行速度，毕竟速度快的电脑极可能很是耗电、很是容易发热还很是贵！有时候人们想要一台续航时间良好的笔记本电脑。有时候呢，人们又想要一个微型的触屏电脑，带摄像头，又小到能够塞进口袋，而且电量足够用一天！计算能力的进步已经让这成为可能（真的很惊人！），不过代价就是运行速度降低。正如你在飙车的时候没法有效（或者说安全）地控制行车路线，你也没法让电脑超负荷计算的同时处理大量任务。如今的解决方案都是借助于单 CPU 多核。所以，如今智能手机广泛都有 4 个较小、较弱的计算核心。

不幸的是，过去的浏览器设计是基于摩尔定律（性能提高）会继续有效的假设。另外，编写可以充分利用多核 CPU 的代码也是极为复杂的。因此，咱们该如何在这个处处都是小型计算机的时代，开发一款高速又高效的浏览器呢？

咱们已经想到了！

在接下来的几个月中，咱们将更进一步关注 Firefox 的变化，以及这些变化将如何更好地利用现代硬件来实现一个更快更稳定的浏览器，从而让网站更加多姿多彩。

皮皮虾，咱们走！

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域，想要查看更多优质译文请持续关注 掘金翻译计划。