什么是浏览器引擎？

 

去年10月，Mozilla宣布Project Quantum - 我们倡议创建下一代浏览器引擎。我们现在正在进行中的项目。我们实际上是在上个月用Firefox 53 发布了我们第一个重要的Quantum。

但是，我们意识到，对于不构建Web浏览器的人（这是大多数人），很难看出为什么我们对Firefox进行的一些更改非常重要。毕竟，我们所做的许多变化对用户来说都是不可见的。

考虑到这一点，我们正在开发一系列博客文章，以深入了解我们正在使用Project Quantum。我们希望这一系列的帖子能够更好地了解Firefox的工作原理，以及Firefox如何构建下一代浏览器引擎，以更好地利用现代计算机硬件。

要开始这一系列的帖子，我们认为最好先解释昆腾正在改变的基本原理。

什么是浏览器引擎，怎么工作？

如果我们要从某个地方开始，我们应该从一开始就开始。

Web浏览器是一种加载文件（通常来自远程服务器）的软件，并在本地显示，允许用户交互。

Quantum是我们在Mozilla上进行的一个项目的代码名称，用于大量升级部分Firefox，这些Firefox将根据这些远程文件显示给用户。该部分的行业术语是“浏览器引擎”，没有人，您只需要阅读代码，而不是实际看到网站。Firefox的浏览器引擎叫做Gecko。

将浏览器引擎视为一个黑盒子很容易，就像电视数据一样，黑盒子显示屏幕上显示的内容以表示数据。今天的问题是：怎么样？将数据转换成我们看到的网页的步骤是什么？

构成网页的数据很多，但大部分分为3部分：

• 代码，表示该结构的网页
• 提供风格的代码：结构的视觉外观
• 作为浏览器执行的操作脚本的代码：计算，响应用户操作，以及修改结构和样式超出最初加载的内容

浏览器引擎将结构和样式结合在一起，在您的屏幕上绘制网页，并确定哪些位置是交互式的。

这一切都从结构开始。当浏览器被要求加载一个网站时，它会被给予一个地址。在这个地址是另一台计算机，当被联系时，将把数据发送回浏览器。这些事情的细节本身是一个完整的单独的文章，但最终浏览器具有数据。该数据以称为HTML的格式发回，它描述了网页的结构。浏览器如何理解HTML？

浏览器引擎包含的代码调用特殊件解析器，从一种格式转换数据转换成另一种浏览器在内存中保存1。HTML解析器采用HTML，如下所示：

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

并解析它，理解：

好的，有一个部分。部分内部是1级的标题，它本身包含文本：“Hello！”内部也是一个图像。我可以在http://example.com/image.png的位置找到图像数据

网页的内存结构称为文档对象模型（DOM）。与长文本相反，DOM表示最终网页的元素树：单个元素的属性以及其他元素中的哪些元素。

除了描述页面的结构之外，HTML还包括可以找到样式和脚本的地址。当浏览器找到这些，它联系这些地址并加载他们的数据。然后将该数据提供给专门从事这些数据格式的其他解析器。如果找到脚本，则可以在文件完成解析之前修改页面结构和样式。样式格式CSS在浏览器引擎中起着下一个作用。

与风格

CSS是一种编程语言，允许开发人员描述页面上特定元素的外观。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代码并将其应用于由HTML解析器创建的DOM。

例如，在上述CSS中，我们有一个规则定位到选择器“section”，它将与DOM中的任何元素匹配。然后为DOM中的每个元素创建样式注释。最终，DOM中的每个元素都完成了样式化，我们将该状态称为该元素的计算样式。当多个竞争样式被应用于同一个元素时，稍后或更具体的元素获胜。将样式表视为薄层描图纸 - 每层可以覆盖以前的图层，但也可以让它们显示出来。

一旦浏览器引擎计算了样式，现在是时候使用它了！DOM和计算的样式被馈送到布局引擎中，该引擎考虑到要绘制的窗口的大小。布局引擎使用各种算法来获取每个元素，并绘制一个将保存其内容并将其应用于所有样式的框。

布局完成后，现在是将页面的蓝图转换成您看到的部分。这个过程被称为绘画，它是所有以前的步骤的最后组合。由布局定义的每个框都将被绘制，内容来自DOM，并且带有CSS中的样式。用户现在看到页面，从定义它的代码重构。

那以前是发生的一切！

当用户滚动页面时，我们将重新绘制，以显示以前在窗口之外的页面的新部分。但事实证明，用户喜欢滚动！浏览器引擎可以肯定地被要求在其绘制的初始窗口之外显示内容（称为视口）。更多的现代浏览器利用这个事实，并绘制更多的网页比最初可见。当用户滚动时，他们想要看到的页面的部分已经绘制并准备就绪。因此，滚动可以更快更流畅。这种技术是合成的基础，它是减少所需涂料量的技术术语。

另外，有时我们需要重绘屏幕的部分。也许用户正在观看以每秒60帧播放的视频。或者也可能在页面上有幻灯片或动画列表。浏览器可以检测到页面的某些部分将移动或更新，而不是重新绘制整个页面，他们创建一个图层来保存该内容。页面可以由彼此重叠的多个层组成。一层可以改变位置，滚动，透明度，或移动到其他图层之后或之前，而无需重新绘制任何内容！很方便

有时脚本或动画会改变元素的风格。当这种情况发生时，样式引擎需要重新计算元素的样式（并且可能是页面上更多元素的样式），重新计算布局（做回流），并重新绘制页面。随着计算机速度的发展，这需要很多时间，但只要偶尔会发生这种情况，该过程不会对用户的体验产生负面影响。

在现代Web应用程序中，文档本身的结构经常被脚本所改变。这可能需要整个渲染过程从头开始更多或者更少，HTML被分析成DOM，样式计算，回流和绘制。

标准

不是每个浏览器都以相同的方式解释HTML，CSS和JavaScript。效果可以有所不同：从小的视觉差异到一个浏览器中工作的偶尔的网站，而不是在另一个浏览器中。这些天，在现代网络上，大多数网站似乎都在工作，无论您选择哪种浏览器。浏览器如何实现这一级别的一致性？

网站代码的格式以及管理代码如何解释和转换为交互式视觉页面的规则由相互商定的称为标准的文档定义。这些文件由由浏览器制造商，网站开发人员，设计师和其他行业成员组成的委员会开发。他们一起确定了浏览器引擎应该给出的具体代码的精确行为。有对HTML，CSS和JavaScript标准，以及图像，视频，音频和多种数据格式。

为什么这很重要？只要您确保引擎符合标准，引擎就可以以Web浏览器上所有数十亿个网页的方式绘制所有其他浏览器的网页。这意味着使网站工作的“秘密酱”不属于任何一个浏览器的秘密。标准允许用户选择满足他们需求的浏览器。

摩尔的不再

当恐龙漫游地球，人们只有桌面电脑时，计算机只会变得更快更强大，这是一个比较安全的假设。这个想法是基于摩尔定律，观察到组件的密度（因此硅芯片的小型化/效率）将大约每两年翻一番。令人难以置信的是，这一观察在21世纪得到了很好的解释，有人认为，在今天的研究前沿仍然是正确的。那么为什么平均电脑的速度在过去十年似乎已经平息下来了？

速度并不是客户在购买电脑时所需要的唯一功能。快速的电脑可以非常耗电，非常热，非常昂贵。有时候，人们想要一台电池寿命很长的便携式电脑。有时候，他们想要一个小巧的触摸屏电脑，配有相机，适合自己的口袋，持续一整天不收费！计算的进步已经使得可能（这是惊人的！），但是以原始速度为代价。只要尽可能快地驾驶您的汽车并不有效（或安全），尽可能快地驱动您的计算机效率不高。解决方案是在一个CPU芯片中拥有多个“计算机”（内核）。看到具有4个更小，功能更低的内核的智能手机并不罕见。

不幸的是，网页浏览器的历史设计就是以这种向上轨迹的速度来呈现。另外，编写同时使用多个CPU内核的代码可能非常复杂。那么，在大量小型电脑的时代，我们如何制作一个快速，高效的浏览器呢？

我们有一些想法！

在接下来的几个月中，我们将会详细介绍一些Firefox的变化，以及如何更好地利用现代硬件来提供更快，更稳定的浏览器，使网站发光。

向前！

 

 

 

 

 

 

转载于:https://my.oschina.net/percylee/blog/903349