Quantum 初探

編者按：本文作者是來自360奇舞團的前端開發工程師安佳，同時也是 W3C 效能工作組成員。

quantum 這個詞來自拉丁語 quantus，意思是 how great - 多麼偉大

Quantum 是 Mozilla 為了構建下一代 Web 引擎的專案。在正式介紹它之前，我們需要先了解一些瀏覽器的相關知識。

瀏覽器相關

圖1. 瀏覽器結構，源自 How Browsers Work

使用者介面（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）。

注意：這裡的 Browser Engine 不同於圖1中的 Browser engine

所以，以下名詞往往是等價的：
瀏覽器的渲染引擎 ~ 瀏覽器引擎 ~ 渲染引擎 ~ 佈局引擎

主流瀏覽器用到的渲染引擎如下：

之所以列出“指令碼引擎”，旨在強調渲染引擎不負責 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 專案的由來和概況有了初步的認識。後續，我會繼續探索更多詳細內容。敬請期待。