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 性能優化。