BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

进入Quantum时代——Firefox如何恢复快速,又将如何变得更快?

| 作者 Lin Clark 关注 0 他的粉丝 ,译者 张健欣 关注 1 他的粉丝 发布于 2017年12月21日. 估计阅读时间: 11 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

人们或许已经意识到,Firefox浏览器又变快了。

过去的七个月中,Firefox的开发团队非常迅速地替换了浏览器引擎的主要部件,将Rust开发语言和Servo引擎的一部分引入Firefox。另外,他们组织了一支攻坚浏览器性能的团队,通过筛查代码库来寻找任何明显的或者不明显的性能问题。

他们将这个项目称为Quantum。重生后的Firefox Quantum的第一个通用版本在11月14日发布。但这并不意味他们努力的终止,也不意味着如今的Firefox的运行速度和响应速度已经足够快了。

因此,让我们来看一看火狐是如何恢复快速的,它又将如何变得更快。

以粗粒度并行架构为基础

为了变得更快,他们需要利用过去10年硬件变化的方式。

Firefox并不是第一个这样做的团队。最开始Chrome团队这样做之后,Chrome的运行速度和响应速度就变得比Firefox更快了。Chrome变快的其中一个原因就是,Chrome工程师发现了硬件发生的变化并开始更好地利用新的硬件。

新型的CPU越来越流行。这些新型CPU拥有多个核心,这意味着这些核心能以并行的方式在同一时间各自独立完成任务。

这其实非常复杂。并行模式下,会引入难以发现和调试的复杂bug。例如,如果2个CPU核心都需要在内存中对同一个数值做加1操作,那么你不特别小心的话,其中一个核心的操作很可能会覆盖另外一个核心的操作。

一个非常简单的避免这种bug的方法是,确保你正在操作的两个事物不需要共享内存,也就是说,将你的程序划分成不需要相互协作的大型任务。这就是所谓的粗粒度并行。

在浏览器中,这些粗粒度任务非常容易区分。每个tab页作为一个粗粒度任务独立工作。也有一些浏览器,例如Chrome浏览器,围绕web页面进行优化,每个页面可以独立处理。

这样,每个页面可以并行运行,以各自的速度工作,不会相互阻塞。如果在一个后台tab页中有一个非常耗时的运行脚本,它不会阻塞当前tab页面的工作。

这就是Chrome工程师提前发现的机遇。Firefox团队其实也看到了这个机遇,但是他们经历了一段崎岖的过程才实现它。由于他们拥有历史遗留的代码库,因此他们需要规划如何拆分遗留的代码库来利用多核硬件。

虽然耗费了一些时间,但是他们也最终实现了目标。通过Electrolysis项目,他们最终让多核处理成为Firefox的默认功能,所有用户都从中受益。Quantum还通过其它一些项目让他们将粗粒度并行应用得更好。

Electrolysis

Electrolysis项目为Quantum项目奠定了基础。Electrolysis项目引入了一种类似Chrome使用的多线程架构。由于这是一个非常大的改动,因此他们从2016年开始非常谨慎地引入这种架构,慢慢地用一小部分用户来测试这种变动,直到2017年中旬才将它开放给所有Firefox用户。

Quantum Compositor

Quantum Compositor将排字器转移到一个独立的进程中。这样做最大的一个好处是,它让Firefox更加稳定。拥有一个独立进程,意味着如果图形驱动崩溃,Firefox不会整体崩溃。另外,拥有这样的独立进程,也可以提升Firefox的响应速度。

Quantum DOM

即使你将内容窗口拆分到多个CPU核心,并为每一个内容窗口提供一个独立的主线程,每个主线程仍然有许多任务需要完成。并且其中一些任务比其它任务更重要。例如,响应一个keypress事件比运行垃圾回收更重要。Quantum DOM给他们提供了一种方法对这些任务排优先级。这大大提升了Firefox的响应速度。这些工作大部分已经完成,但是Firefox团队还计划深入研究“抢先调度(pre-emptive scheduling)”来进一步改进。

用细粒度并行架构充分利用硬件性能

然而,展望未来时,Firefox团队需要研究比粗粒度并行更优秀的架构。

虽然粗粒度并行很好地利用了硬件资源,但是这种利用并不充分。当你将web页面分隔到不同的CPU核心中,其中一些核心并没有工作需要做。那么,这些核心就会闲置。并且,在一个新CPU核心中打开一个新页面和在单核CPU中打开一个新页面花费的时间几乎相同。

如果能够在加载新页面时利用所有这些CPU核心来进行处理,就可以更快地完成页面加载。这会非常棒。

但是在粗粒度并行架构下,很难将这些工作从一个核心分配给其它的核心。因为这些工作间没有边界。

在细粒度并行架构下,可以将大的任务拆分到更小的单元中,而这些单元可以被分配给不同的核心。例如,类似Pinterest的网站,可以将不同的固定项目拆分,然后分配到不同的核心进行处理。

这不仅减少了粗粒度并行架构的延迟,还在纯速度方面有所提升。因为加载工作被分配到所有的核心,因此页面可以加载得更快。而且你增加的核心越多,你的页面加载速度就会越快。

Firefox团队已经看到了这是未来趋势,但是还不清楚如何能够实现这一点。因为要想使这种细粒度并行架构快速运行,需要在多个核心间共享内存。这就会造成Lin Clark以前提到的data race问题(data race是指,在一个线程中存在2个已上的线程并发访问共享内存,至少其中之一是写操作,这些线程还不使用排它锁来控制对内存的访问,这会造成数据结果的不确定性的情况。虽然有些data race是无害的,但大部分data race会造成程序bug)。

但是Firefox的开发团队知道,浏览器必须做出这样的转变,因此开始投入研究。他们发明了一种语言——Rust,它可以非常容易解决这些data race问题。他们还发明了一个浏览器引擎——Servo,它可以完全利用这种细粒度架构。通过这些,他们证明了细粒度并行架构确实可行,浏览器可以在更快运行的同时拥有更少的bug。

Quantum CSS (Stylo)

通过Stylo,CSS样式计算工作完全并行运行在所有CPU核心中。Stylo运用了一项叫做工作窃取(work stealing)的技术来将工作有效率地分配给各个核心,让所有CPU核心都保持忙碌。这样,样式计算工作得到线性加速。你将进行CSS样式计算所需要的时间分摊给所有你使用的CPU核心。

Quantum Render (featuring WebRender)

另外一种高度并行的硬件是GPU。它拥有成百上千个核心。因此,你必须做许多规划来确保这些核心尽可能忙碌。这些就是WebRender做的事情

WebRender将在2018年发布,他会利用现代GPU。同时,我们也会从另外一个角度攻克这个难题。Advanced Layers项目修改了Firefox现存的分层系统来支持批渲染。它通过优化Firefox目前的GPU使用方式,给了我们立竿见影的效果。

???

Firefox团队认为渲染流程的其他部分也会从这种细粒度并行架构中受益。在接下来的数月里,他们将密切关注还有哪些方面可以使用这些技术。

确保Firefox保持更快的速度,不会再慢下来

除了这些他们已经知道将不得不进行的主体架构上的变动,还有许多他们因为疏忽而引入代码库的性能bug需要修复。

因此,我们创造了Quantum的另外一部分来修复这些问题......基本上是通过一支浏览器攻性能坚团队来发现这些问题并组织团队修复它们。

Quantum Flow

Quantum Flow团队就是这种攻坚力量。与集中于一个特定子系统的整体性能不同,他们首要集中于一些特定的重要的用例,例如,加载社交媒体种子,跨团队来搞清楚为什么Firefox比其它浏览器响应慢。

Quantum Flow带来巨大的性能优势。同时,他们还开发了许多工具和流程来更容易地发现和跟踪这类型的问题。

那么Quantum Flow目前怎么样了?

Quantum Flow是如此高效识别问题并且每次聚焦一个关键用例,他们将它作为常规工作流程的一部分。为了实现这点,他们正升级工具,这样就不需要一支专门的攻坚力量来寻找问题,而是让组织内更多的工程师有能力发现这些问题。

但是这个方案也有一个问题。当优化了一个用例时,可能会让另外一个用例退化。为了防止这种情况,他们增加了许多新的监测手段,包括优化持续集成自动化来运行性能测试、跟踪观测用户体验以及bug回归管理。通过这些,他们期望Firefox Quantum持续变得更好。

Quantum的发布仅仅是个开始

11月14日对于Firefox团队来说,是在Mozilla重要的一天。他们在过去的一年中非常努力来让Firefox更快。但这仅仅只是开始。

他们将在接下来的一年持续交付性能方面的优化,期待将这些分享给你!

当Firefox Quantum正式版本开发者版本发布时,可以尝试它们,来确保你能够获取到最新的更新。

关于作者

Lin Clark是Mozilla开发者关系团队的一名工程师。她热衷于捣鼓JavaScript、WebAssembly、Rust和Servo,还喜欢画一些关于代码的卡通漫画。你可以在code-cartoons.com浏览这些卡通漫画,还可以在twitter @linclark,还可以点击这里浏览更多她的文章。

查看英文原文:Entering the Quantum Era—How Firefox got fast again and where it’s going to get faster

感谢雨多田光对本文的审校。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT