Quantum 初探

时间 2019-11-16

标签 quantum 初探繁體版

原文原文链接

编者按：本文做者是来自360奇舞团的前端开发工程师安佳，同时也是 W3C 性能工做组成员。html

quantum 这个词来自拉丁语 quantus，意思是 how great - 多么伟大前端

Quantum 是 Mozilla 为了构建下一代 Web 引擎的项目。在正式介绍它以前，咱们须要先了解一些浏览器的相关知识。html5

浏览器相关

图1. 浏览器结构，源自 How Browsers Workc++

用户界面（User Interface）：除了用于显示网页内容的视口以外，你能看到的其它全部部分都属于用户界面，诸如地址栏、前进/后退按钮、书签菜单等。
浏览器引擎（Browser Engine）：在用户界面和渲染引擎之间传送指令。
渲染引擎（Rendering Engine）：负责显示浏览器请求回来的资源内容。资源能够是 HTML 文档、PDF、图片或其它类型，它们的位置都是用 URI 指定的。若是请求的资源是 HTML，那渲染引擎就负责解析 HTML 和 CSS，并将解析后的内容显示在屏幕上。
网络（Networking）：负责网络调用，好比 HTTP 请求。不一样平台的实现会有所差别。
JS 解释器（Javascript Interpreter）：用于解析和执行 JavaScript 代码。
用户界面后端（UI Backend）：用于绘制基础小部件，好比组合框和窗口等。此层会公开平台无关的通用接口，而它的底层则是调用操做系统的用户界面方法。
数据持久化存储（Data Persistence）：浏览器的客户端持久化存储，诸如 Cookie、Local Storage、Session Storage、 IndexDB、WebSQL 等。

渲染引擎（Rendering Engine）也叫布局引擎（Layout Engine）。浏览器的渲染引擎，有时也简称为浏览器引擎（Browser Engine）。git

注意：这里的 Browser Engine 不一样于图1中的 Browser enginegithub

因此，如下名词每每是等价的：
浏览器的渲染引擎 ~ 浏览器引擎 ~ 渲染引擎 ~ 布局引擎后端

主流浏览器用到的渲染引擎以下：浏览器

之因此列出“脚本引擎”，旨在强调渲染引擎不负责 JS。对 JS 的解释和执行是由独立的引擎完成的，好比大名鼎鼎的 V8 引擎。安全

对 HTML 文档来讲，渲染引擎的主要任务就是解析 HTML 和 CSS，再把最终的结果绘制到屏幕上。性能优化

下面是各个渲染引擎的时间线，咱们能够很直观地看出她们的生日和年龄。其中，Trident、KHTML、Presto 已经中止更新；Gecko、Webkit、Blink 和 Edge 依然在持续更新中。

图2. 浏览器引擎，源自维基百科 Browser engine

2013年，Mozilla 启动了一项研究型项目 Servo。这是一个从零开始设计的浏览器引擎，目标是提升并发性和并行性，同时减小内存安全漏洞。它是由 Rust 语言编写的，而 Rust 有更好的内存安全属性和并发功能。

2016年4月，考虑到 Servo 还须要几年才能成为功能完备的浏览器引擎。因此，Mozilla 决定启动 Quantum 项目，将 Servo 的稳定部分带到 Firefox 里。

关于集成到 Firefox 中的 Servo 组件，可查看 Jack Moffitt 的演讲视频 Web Engines Hackfest¹

Gecko 是 Mozilla 的一个成熟且功能健全的 Web 浏览器引擎，它起源于1997年的 Netscape。Mozilla 采用渐进式的方法，将 Servo 里已稳定的组件迁移到 Gecko 中，用户将没必要等很长时间就能看到 Firefox 在稳定性和性能上的显著改进。

2017年11月发布的 Firefox 57 是初版启用了 Servo 组件的浏览器，以后便在此版本的基础上进行迭代开发。

Quantum 以 Gecko 引擎为基础，同时利用了 Rust 的良好并发性和 Servo 的高性能组件，为 Firefox 带来了更多的并行化和 GPU 运算，让 Firefox 更快更可靠。

Quantum 是一个将 Mozilla 的多个社区及其代码仓库联系在一块儿的大项目，它包含多个子项目：

rust-bindgen：是 Rust 语言的 C++ 绑定生成器。Quantum 用它生成的代码，可用在 Firefox 的 C++ 代码和 Servo 的 Rust 组件之间。感兴趣的朋友能够查看 Contributing to rust-bindgen²。
Quantum CSS：也叫 Stylo，旨在把 Servo 的并行 CSS 系统集成到 Gecko 中，能够充分利用多核 CPU 的硬件特性。
Quantum Render：旨在将 WebRender 做为 Firefox 的图形后端。WebRender 是 Servo 针对 GPU 渲染进行了优化的下一代渲染器，它用保留模式模型替换当即模式绘制模型，经过利用 CSS/DOM 和场景图的类似性，让 GPU 加速更容易。
Quantum Compositor：将 Gecko 现有的合成器移到本身的进程中，将图形驱动程序相关的崩溃和浏览器页签隔离开来，以让 Firefox 更稳定。此特性已经在 Firefox 53 里发布了。
Quantum DOM：在 DOM 中使用协同调度线程来提升响应速度，而不用增长进程数和内存，这会让 Gecko 更具响应性，尤为是当有大量后台页签打开的时候。不一样页签（也多是不一样 iframe）的 JS 代码将运行在独立的线程中，某些后台页签的代码将永远不会被运行。更多可查看 Bill McCloskey 的博客³。
Quantum Flow：探讨了目前还没有被涵盖的性能改进，例如 UI 性能优化。

至此，你们对 Quantum 项目的由来和概况有了初步的认识。后续，我会继续探索更多详细内容。敬请期待。