在去年十月,Mozilla宣布了Quantum项目,旨在创建下一代的浏览器引擎.在这个项目上,我们进展顺利.我们推出的第一个有重要意义的Quantum版本是上个月发布发Firefox 53.
不过我们认为对于那些不会去编写web浏览器的人(这占绝大多数),我们在Firefox上所做出的重大改变,他们是难以看见的.毕竟我们会使这些改变对用户透明.
出于这样的考虑,我们发布了系列博文,用于提供我们正在开发的Quantum项目的深度视点.我们希望这个系列博文能够让你更好的理解Firefox是如何工作的,同时也能让你在使用具有下一代浏览器引擎的Firefox时,更好的利用现代计算机硬件.
而且我们认为要明白Quantum的功能性变化,从那些博文开始是最好的.
什么是浏览器引擎?它又是如何工作的?
一个web浏览器是一种软件,它能够载入文件(通常从一个远程服务器哪里载入)并且从本地显示他们,允许用户跟由这些文件构成的UI交互.
Quantum是项目代号,我们在Mozilla对Firefox里基于这些远程文件来给用户显示的部分进行了大量更新.更新的这部分用术语可以称之为"浏览器引擎",你应该去读代码,而不是去看那些你看到的网站.Firefox的浏览器引擎被称为:Gecko.
很容易看出,浏览器引擎就如同一个黑盒,而这个黑盒如同电视一样,解决了如何将传入的数据显示在屏幕上的问题.现在的问题则是:这是如何做到的?浏览器是通过哪些步骤让数据进入web页面然后显示给我们的?.
组成web页面的数据是由很多东西构成的.但是绝大多数数据都可以分成以下三部分:
表示web页面结构的代码.
页面视觉结构的样式代码.
计算,反馈用户操作和修改web页面结构与样式的浏览器脚本代码.
浏览器引擎能把结构和样式组合在一起,以使它们在你的窗口上绘制web页面,并且找出那些部分是交互式的.
一切都从浏览器开始.当浏览器要载入一个网站时,它就会获得一个地址.这个地址是其他计算机的,在连接上那个地址指向的计算机后,该计算机会发送数据块给浏览器,这个数据会以被称为HTML的格式发送,它描述了web的页面结构.那么浏览器又是如何理解HTML的?
浏览器引擎包含了被称为语法分析器(parsers)的专用代码片段.它能将一种数据格式转换成另一种数据格式,这能让浏览器在内存中对其进行操作.HTML语法分析器获取的HTML如同下面所示:
<section>
<h1 class="main-title">Hello!</h1>
<img src="http://example.com/image.png">
</section>
然后语法分析器就开始解析HTML,解析过程如下:
1)这有一个section.
2)section还包裹着一个h1.
3)h1还包含一段文本:“Hello!”.
4)section内部还有一个img.
5)我能从img内的src地址:http://example.com/image.png获取到这个数据.
web页面在内存中的结构被称为文档对象模型或DOM.DOM会将最终显示的web页面描述成被称为DOM树的树状结构,如下图所示:
image
除了描述页面结构外,HTML也包含了能够下载css与javascript的地址.当浏览器解析这些地址时,它就会下载这些地址所指向的数据.下载完毕后,这些数据就会被递送给专门用来解析它们的解析器.如果HTML包含javascript,那么在这个脚本被下载和解析后,它就会变更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元素所应用的样式.第二部分则是声明列表,它位于选择器之后,用于声明该选择器要应用的样式.浏览器引擎包含了被称为样式引擎(style engine)的子系统.它用于获取CSS代码并将其应用于DOM解析器创建的DOM.
image
例如,在CSS上,我们有一个让选择器选择'section'的规则,那么选择器就会去匹配任何在DOM中与这个名字相匹配的元素.然后对DOM中的每一个'section'应用相应的样式.最终每一个在DOM中的'section'元素都会被样式化,我们将这个称之为该元素的样式计算(即查找元素-应用样式的过程).当多个样式计算被应用于同一个元素时,那些应用的更靠后和更具体的样式就会覆盖其他不那么靠后和具体的样式(不冲突的样式不会被覆盖).
可以把样式表想象成一个图层,一个极薄的,可以堆叠的图层,每一个图层都会覆盖其他更旧的图层,并最终把他们显示出来.
一旦浏览器引擎开始了样式计算,就会使用样式表.DOM和样式计算会被传递进排版引擎(layout engine).排版引擎使用多种算法来获取每一个元素并绘制相应的盒子.排版引擎会控制元素内容并考虑所有应用其上的样式.
image
当图层完成时,就会把页面蓝图转变成你在浏览器上看见的样子.这个过程如同上色一样,它会将先前所有的步骤都组合在一起.每一个盒子的绘制都会被图层所定义,通过图层的DOM内容与CSS样式.用户所看见的页面,是被上面这些代码重新构造了的.
在上面那些事件都发生后,当用户滚动页面时,我们会重新绘制并显示先前并没有出现在窗口中的那部分页面.浏览器引擎相当确信它会被要求显示在初始窗口之外的内容.现代浏览器利用了这一点,它们会在一开始就绘制屏幕之外的内容.当用户滚动窗口时,用户想要看见的那部分内容就早已被准备好提供给用户了.这无疑会让滚动非常的快与平滑.这是一种基础合成技术(the basis of compositing),这一术语所代表的技术,是为了减少页面绘制数量.
此外,在某些事件我们会需要重新绘制屏幕的内容.或许用户想要以60FPS的速度看一个视频,又或者在页面上有一些幻灯片和动画化列表.浏览器会检测页面部分是否需要移动或更新,而不是重新绘制整个页面,它们会创建一个图层去控制内容.一个页面由许多相互重叠的图层构成.一个图层能够变换位置,滚动(scroll),改变透明度或者移动到其他图层前面,这些都不需要重新绘制!非常方便.
脚本和动画在一些时候会改变元素的样式.在发生这些事情的时候,样式引擎(style engine)需要重新计算元素样式(甚至包括在页面上的许多潜在元素的样式),重新计算布局和重新绘制页面.这会花费许多时间,并且如此长时间的等待,就算这只是偶尔发生,这个过程也会对用户的体验造成非常消极的影响
在现代web应用中,文档结构会频繁的被脚本所改变.这就要求整个渲染过程或多或少都要从头开始,诸如将HTML语法分析成DOM,样式计算(style calculation),回流(reflow)和绘制.
image
规范
不同的浏览器解释HTML,CSS和JS的方法是不同的.最终的结果也会有差别:从一些视觉上的微小差异到只能在特定浏览器下工作的网站.但是,对于大多数现代web网站而言,它们完全不在意你在使用那一款浏览器.那么,浏览器是如何实现这种一致性的?
网站代码格式决定着代码是如何被解释和转换成交互式页面的.代码格式是由多方协商的文档所规定,而这个文档也被称之为标准.这些文档由委员会制定,委员会由浏览器开发商,web开发者与设计者和其他业界成员构成.他们一起决定对于某一个代码片段,浏览器引擎所应该表现出的明确行为.这些标准对于HTML,CSS和JS就如同数据格式对于图片,视频,音乐的意义一样.
为什么规范如此重要?因为它会影响所有新浏览器引擎的开发,所以你只要确保你开发的引擎遵循着规范,那么这个引擎绘制的一个页面也能在其他浏览器引擎中如预期的一样绘制.这意味着一个有着黑科技视觉效果的网站可以在任意一个浏览器中正常绘制而不必担心浏览器不支持.规范允许用户去选择他们所偏好的浏览器,而不必考虑浏览器对某些网站的兼容性.
摩尔不在(Moore’s No More)
当恐龙漫游在地球上时,人类仅有一台桌面电脑,这是一个相当安全的假设,计算机是越来越快和有效率的.(我也不知道这里为什么会有恐龙,望告知)这个想法基于摩尔定律,留意处理器上电子元件的密度,他大概每两年翻一倍.难以置信的是,这个结果在21世纪仍然有效,一些人也证明出这一点就算是在前沿研究领域也依然如此.那么为什么最近10年来的计算机平均速度却趋于平稳了呢?
顾客在商店里并不仅仅只关注计算机的速度.速度极快的电脑也非常耗电非常的烫,同时也非常的昂贵.某些时候,人们想要电池能够支撑长时间使用的笔记本电脑.在另一些时候,人们想要一个能够放入他们口袋的,具有触摸屏幕和一个摄像头的电脑,并且一整天都不用充电.计算机的不断发展使这成为可能,但这是有代价的.就像开车时,速度与安全,你只能选择一个.这些东西也不能让你的电脑变快.而解决方案就是在一个CPU中放入多个''计算机''内核.这一点在只能手机中是非常常见的,因为他们通常都有4个功能更弱体型更小的核心.
不幸的,web浏览器的历史设计(historical design)是以计算速度越来越快为前提进行设计的.这意味着写一个能够良好操作多核心CPU的代码是极端难懂复杂的.那么,我们应该如何编写一个能够在老电脑上运行快速,有效的浏览器?
我们有一些想法!
在即将到来的几个月里,我们聚焦于Firefox即将到来的改变和它是如何能够更加充分的利用现代硬件去更快的和更稳定的驱动浏览器的.
前进!
网友评论