请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

近距离接触“量子”:关于浏览器引擎

yingliu Mozilla员工 发表于 2017-7-4 15:19:16 火狐社区移动版 | 显示全部楼层 [复制链接]
5 6220
本帖最后由 yingliu 于 2017-10-24 16:34 编辑

1M24XrPmfD5YQ.jpeg

前言:
Mozilla
于去年10月开始推动打造下一代浏览器引擎的「量子项目」(Project Quantum),并已在今年四月随 Firefox 53 发布了量子项目的第一波重大成果。
不过,我们发现,对于没开发过网页浏览器的人来说(也就是绝大多数人!),很难理解 Firefox 一些更新的意义有多大——毕竟,大部分的改变都不是表面看得到的。
为此,Mozilla 着手准备一系列的博客文章,以便更深入地说明量子项目的内涵。我们希望,这些文章能帮助你了解更多 Firefox 背后的奥秘,以及 Firefox 如何利用现代的计算机硬件来打造下一代的浏览器引擎。
这是本系列第一篇文章,我们打算先说明量子项目所代表的根本改变。
什么是浏览器引擎?浏览器引擎如何运行?
下面会一一解答。


网页浏览器是一种软件。它会加载文档(通常是从远程服务器加载)后,再在本地端呈现出来,以供用户互动。

「量子」是 Mozilla 针对 Firefox 据远程文档来决定该显示什么内容给用户的一项大规模变革计划。专业来讲,主要的更新对象就是「浏览器引擎」。若没有浏览器引擎,你根本看不到网站,而只能看到程序代码。Firefox 的浏览器引擎名为 Gecko(译为:壁虎)。

我们可以把浏览器引擎想成是个黑盒子——就像电视机一样。接收到数据后,黑盒子就会判断要如何在屏幕上显示数据。现在,问题来了:「黑盒子」是如何办到的呢?必须经过哪些步骤才能把数据转成我们看到的网页内容?

2Vu81gqcwiGO.png


构成网页的数据不胜枚举,但一般来说,可分为三部分:
  • 代表网页「结构」的程序代码
  • 形成网页内容「样式」的程序代码:即网页结构的视觉呈现
  • 如同「脚本」般规范浏览器所要采取行动的程序代码:计算、响应用户的不同动作,以及修改初次加载后的结构和样式等等

浏览器引擎会结合结构与样式,在屏幕上显示出网页,同时还会判断哪些部分须具备互动性。

这要从结构开始。当浏览器接到加载网站的请求时,它会收到一个网址,位于这网址上的是另一台计算机,当浏览器与该计算机联系后,后者便会将数据传回给前者。这两者中间的互动过程当然不是三言两语可以讲完,我们也确实用了另一篇文章来说明,但长话短说,浏览器最终会拿到数据。此数据会以 HTML 格式传输,并会描述网页的结构。那么,浏览器又是如何理解 HTML 的呢?

浏览器引擎包含名为解析器(parsers)的特别的程序代码,可将不同格式的数据转换成另一种格式,让浏览器存在内存中(注:人脑也有类似于解析的功能。例如,「eight」一词是由多个字母组成的,但你会在脑中把它们转换成数字「8」,而不只是一个个字母 e-i-g-h-t)。

HTML 解析器会收到 HTML 信息,例如:
  1. <section>
  2. <h1 class=”main-title”>Hello!</h1>
  3. <img src=”http://example.com/image.png">
  4. </section>
复制代码

然后会予以解析,做出这样的理解:
好,这是一个区块。在这个区块里,有一个第一阶的标题,标题内有「Hello!」的文字。区块里还有一个图像。我可以在这里找到图片数据:http://example.com/image.png

网页的内存结构是文档对象模型(DocumentObject Model),简称为 DOM。DOM 不会呈现一长串的文字,而是以树状结构组成最终要在网页上呈现的元素:个别元素的属性,以及哪些元素要放在哪些元素内。

44pppp.png

除了描述页面的架构外,HTML 还带有可找到网页内容样式和脚本的网址信息。当浏览器找到这些信息后,就会联系那些网址并加载数据,然后再把数据派送到专门负责解析相关格式的解析器去处理。如果浏览器找到了脚本,也可在文档解析完成前一并修改页面结构和样式。

掌管网页样式格式的 CSS 则在浏览器引擎中扮演下一个主要角色。

网页风格
CSS 是一种程序语言,能让开发人员描述特定元素在网页上应该呈现的样子。CSS 的全名是 Cascading Style Sheets(层叠样式表),原因在于它能让你设定多重样式的指令,且指令可覆盖掉前面或一般性的样式指令(名为 cascade,「级联」)。例如,CSS 指令可能像这样:
  1. section {
  2.   font-size: 15px;
  3.   color: #333;
  4.   border: 1px solid blue;
  5. }
  6. h1 {
  7.   font-size: 2em;
  8. }
  9. .main-title {
  10.   font-size: 3em;
  11. }
  12. img {
  13.   width: 100%;
  14. }
复制代码

4DrLqoSGq5oBY.png

CSS 大致含有几组「规则集」,每个规则集都带有两部分。开头是负责描述 DOM 元素样式的选择器(selector);后面还跟着一连串的声明(declarations),以规定哪些样式应该应用到哪些与选择器相符的元素上。浏览器引擎的子系统——样式引擎则负责接收 CSS 码,并套用到 HTML 解析器产生的 DOM。

譬如,在上述的 CSS 指令中,有一条规则锁定了选择器「区块」(section),与 DOM 中有同样名称的元素吻合。

接着,DOM 里的每个元素会产生样式注释(annotation)。最后,DOM 内各元素的样式都会设置完成,这状态称为元素的「计算样式」(Computed style)。当几种彼此竞争的样式都套用在同样的元素上时,较晚出现或较明确的占上风。你可以把样式表想象成一层层薄薄的图纸——下方图层虽会被上面覆盖住,却依然若隐若现。

浏览器引擎取得计算样式后,该是让计算样式施展身手的时候了! DOM 和计算样式会被送到布局引擎(layout engine),由该引擎来估算容纳网页内容的窗格大小。布局引擎采用几种不同的算法分析各个元素后,再画出一个框框来容纳所有内容及应用在内容上的各种样式。

5WcbYlyWs.png


排版完成后,浏览器引擎会将页面蓝图转换成你在屏幕上看到的模样。这个步骤叫做「描绘」(painting),这也是前面几个步骤的最终整合。每个由布局引擎定义出的内容框会被画出来,里面包含由 DOM 提供的内容,以及由 CCS 提供的样式。到这里,程序代码重组完成,用户终于能看到页面了。

过去,整个程序到这里就大功告成!

当用户滚动页面时,我们会重新描绘,以呈现先前窗口以外的页面上的其他元素。但后来,我们发现用户很喜欢滚动页面!浏览器引擎几乎每次都会被要求显示先前画出的窗口(viewport)以外的内容。基于这一点,比较现代的浏览器会先画出较多可显示的页面,所以当用户滚动页面时,他们想要看的内容已经画好了,而且能立刻呈现出来。这使得页面滚动过程变得更快速、更平顺。这个技术是图层合成(compositing)的基础,而合成的好处在于减少描绘的工作量。

还有,我们有时也需要重绘屏幕中的部分内容。浏览器用户可能正在看每秒60格速率的影片;或是页面上有幻灯片或动画效果。浏览器可侦测到页面将要移动或更新的区块,并会产生一个图层来容纳那些内容,而不必重新绘制整个页面。一个页面可包含许多彼此相迭的图层。在完全不必重绘任何元素的情况下,每张图层的位置、滚动、透明度都可调整,还能移动到其他图层的上下方,非常方便!

偶尔,网页元素的样式会随脚本或动画而变。当发生这种状况时,样式引擎就得重新计算该元素的样式(可能也得重新计算页面上其他许多元素的样式)、重新估算布局(执行 reflow,「回流」),以及重绘页面。受限于计算机的速度,这过程得耗上很长的时间,但如果偶尔才出现一次,还不至于影响用户体验。

以现代的网络应用来说,文件本身的结构会常因脚本变动,使得渲染过程多多少少被重复,包括:把HTML 解析为 DOM、计算样式、回流和绘制。

6ZR7MKlKHw5w.png

标准
由于每家浏览器解读 HTML、CSS 和 JavaScript 的方法各异,而会产生不同程度的影响:从视觉呈现上的小差别,到某些网站只能在某一浏览器上正常运行等等。不过,到了近期,大多数网站都能在各现代化浏览器上正常运作。那么,浏览器有这么多种,它们是怎么办到的呢?

网站程序代码格式,以及规定程序代码如何编译与转为交互式可视化页面的原则,都已遵循统一的标准。这些标准是由浏览器厂商、网页开发人员、设计人员和其他业内成员组成的委员会所制定并达成共识的一系列文件。这些标准规范了浏览器引擎在特定程序代码出现时所须展现的行为。现有标准包括HTML、CSS 和 JavaScript标准,以及图片、视频、音频等等数据格式的标准。

这一点为何重要?如果有人要开发全新的浏览器引擎,只要遵守相关标准的规定,该引擎就能用和其他浏览器一样的方法,帮网络上数十亿个网页显示出页面。也就是说,让网站运行的「独门秘方」已不再专属于某一个浏览器,而这些标准就是能让用户挑选自己爱用的浏览器。

摩尔定律已到尽头
在恐龙还存在于地球、世界上只有台式计算机的“远古时代”里,“计算机会越来越快和越来越强大”的假设还算站得住脚。此假设的根据是摩尔定律,其内涵是组件的密度(以及硅芯片的微型化/效率)大约每两年增加一倍。令人赞叹的是,摩尔定律的规律一直到21世纪都没被打破,甚至现在有些人认为,摩尔定律至今依然适用于尖端研究。既然如此,为什么计算机成长的平均速度似乎在过去10年间越来越缓慢?

当消费者选购计算机时,速度并非唯一的考虑。跑得快的计算机价格高昂、用电量大,也容易过热。有些时候,用户想要的是电池续航能力高的便携式计算机,或者,他们想要一台能放入口袋、有触控屏幕、能照相、还能一整天不用充电的小型计算机!运算技术的进展已能满足这样的需求,只是要牺牲点指令周期。这就像开车一样,以最高速驾车并不一定能保证效率(或安全),同样的计算机以最快速运转也不见得有效率。为了解决此问题,一个 CPU 芯片里才要容纳好几台“计算机”(所谓的几核)。现在许多智能型手机都搭载四颗较小、指令周期较慢的核心,正是因为这个缘故。

可惜的是,网页浏览器过去在设计上就假设计算机指令周期会不断攀升。还有,编写能同时执行几个 CPU 核心的程序代码的工作非常复杂。那么,在小型计算机普及的时代,我们该如何打造既快速又高效的浏览器呢?

我们已经有些好点子了!

在接下来的几个月里,我们将进一步说明 Firefox 未来的一些改变,以及通过这些改变,我们将如何运用现代化的硬件来打造出更快和更稳定的浏览器

一起期待吧!



隐元 老狐狸
发表于 2017-7-4 20:22:14 | 显示全部楼层
拭目以待mozilla引领风骚的杰出质变!
310971373 狐狸精
发表于 2017-7-5 09:19:58 | 显示全部楼层
沙发沙发,又重温了一边浏览器加载渲染的知识,什么时候更新几篇Rust的文章呢,以前介绍Rust的文章太少了,希望能多推荐几篇。
FlamingFox 小狐狸
发表于 2017-7-5 20:08:01 | 显示全部楼层
学习了,非常好的网页制作科普知识。不知道在扩展开发上,能否开发出符合“量子”浏览器适用的网页保存扩展,就像ScrapBook系列扩展那样。如果可以的话,我倒是希望让“量子”浏览器能默认支持像MHT或MAFF格式的网页。方便用户选择并下载保存这些网页。
已成金 小狐狸
发表于 2017-7-11 09:20:54 | 显示全部楼层
收藏了,知识就是力量!
day廿 狐狸仔
发表于 2017-7-13 09:21:29 火狐社区移动版 | 显示全部楼层
火狐安卓版,新打开一个网页后再回退到之前的网页,需要再加载一遍,太耗流量和时间了。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
热门活动更多 »
  • 量子火狐中国社区见面会 Firefox Quantum Fan Meeting[北京]

    立即参与
火狐微信
快速回复 返回顶部 返回列表