【譯】解密 Quantum：現代瀏覽器引擎的構建之道

• 原文地址：Quantum Up Close: What is a browser engine?
• 原文做者：本文已得到原做者 Potch 受權
• 譯文出自：掘金翻譯計劃
• 譯者：吃土小2叉
• 校對者：AceLeeWinnie、yzgyyang、薛定諤的貓

解密 Quantum：現代瀏覽器引擎的構建之道

2016 年 10 月，Mozilla 公佈了 Quantum 項目 —— 旨在開創下一代瀏覽器引擎。如今這一項目已然步入正軌。實際上，咱們在上個月剛更新的 Firefox 53 中首次包含了 Quantum 的部分核心代碼 。

可是，咱們意識到對於那些不從事瀏覽器開發的人來講（並且是大多數人），很難明白這些改動對於 Firefox 的重大意義。畢竟，許多改動對於用戶來講是不可見的。

意識到這點後，咱們開始撰寫一系列博客文章來深度解讀 Quantum 項目正在作什麼。咱們但願這一系列的文章可以幫助你們理解 Firefox 的工做原理，以及 Firefox 是如何打造一款下一代瀏覽器引擎，從而更好地利用現代計算機的硬件性能。

做爲這系列文章的第一篇，最好仍是先說明一下 Quantum 正在改變哪些核心內容。

瀏覽器引擎是什麼？它的工做原理又是什麼？

那麼，就從頭開始提及吧。

Web 瀏覽器是一種軟件，它首先加載文件（一般這些文件來自於遠程服務器），而後在本地顯示這些文件，而且容許用戶交互。

Quantum 是項目的代號，Mozilla 啓動這個項目是爲了大幅度升級 Firefox 瀏覽器的某個模塊，這個模塊決定了瀏覽器如何根據遠程文件將網頁顯示給用戶。這一模塊的行業術語叫「瀏覽器引擎」，若是沒有瀏覽器引擎，用戶就只能看看網站源代碼而不能瀏覽網站了。Firefox 的瀏覽器引擎叫 Gecko。

能夠簡單地把瀏覽器引擎看做一個黑盒（有點相似於電視機），灌入數據後由黑盒來決定展現在屏幕上的數據形態。如今的問題是：瀏覽器引擎是如何呈現頁面的？它是經過哪些步驟將數據轉化爲咱們所看見的網頁？

網頁數據一般有許多類型，但總的來講能夠劃分爲三大類：

• 用於描述網頁結構的代碼
• 用於提供樣式的代碼，描述了網頁結構的視覺外觀
• 用於控制瀏覽器行爲的腳本代碼，包括：計算、人機互動以及修改已初始化的網頁結構和樣式。

瀏覽器引擎將頁面結構和樣式結合從而在屏幕上渲染出網頁，同時肯定能夠互動的內容。

這一切要從網頁結構提及。瀏覽器會根據給定的地址去加載一個網站。這個地址指向的是另外一臺電腦，當它收到訪問請求時，會返回網頁數據給瀏覽器。至於這個過程的具體實現能夠查閱這篇文章，反正最後瀏覽器拿到網頁數據了。這個數據以 HTML 的格式返回，它描述了網頁的結構。那麼瀏覽器又是如何讀懂 HTML 的呢？

瀏覽器引擎包含一類稱爲解析器的特殊模塊，它將數據從一種格式轉換爲另外一種能夠存儲在瀏覽器內存中的格式。舉個例子，HTML 解析器拿到了如下 HTML 內容：

<section>
 <h1 class="main-title">Hello!</h1>
 <img src="http://example.com/image.png">
</section>複製代碼

因而，解析器開始解析、理解 HTML，下面是解析器的獨白：

嗯，這裏有個章節。在這個章節裏有個一級標題，這個標題包含的文本內容是 「Hello!」。另外在這個章節中，還有一張圖片。這個圖片的數據從這裏獲取：example.com/image.png

網頁在瀏覽器內存中的結構被稱爲文檔對象模型，簡稱 DOM。DOM 以元素樹的形式來表示頁面結構，而非長文本形式，包括：每一個元素各自的屬性以及元素間的嵌套關係。

A diagram showing the nesting of HTML elements

除了用於描述頁面結構，HTML 一樣包含指向樣式文件和腳本文件的地址。瀏覽器發現這些後，就開始請求並加載數據。而後瀏覽器會根據數據的類型，指定相應的解析器來處理。腳本文件能夠在 HTML 文件解析的同時，改變頁面的結構和樣式。而樣式規則，CSS， 在瀏覽器引擎中發揮如下做用。

關於樣式

CSS 是一門編程語言，開發者能夠藉助 CSS 描述頁面元素的外觀。CSS 全稱 Cascading Style Sheets （譯註：層疊樣式表），之因此這樣命名是由於多個 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 中須要應用樣式的元素（上文說過，還記得嗎？）。另外一部分則是一系列樣式聲明，應用於與選擇器匹配的元素。瀏覽器引擎中包含一個名爲樣式引擎的子系統，用於接收 CSS 代碼，並將 CSS 規則應用到由 HTML 解析器生成的 DOM 中。

舉個例子，在上述 CSS 中，咱們有一條規則指定了選擇器 「section」，這會匹配到 DOM 中全部 section 元素。接着，瀏覽器引擎會爲 DOM 中的每個元素附上樣式註解。直到最後每一個 DOM 元素都應用了樣式，咱們將該狀態稱爲元素樣式計算完畢。而當多個選擇器做用在一個元素上時，源代碼次序靠後的或者權重更高的 CSS 規則最終會應用到元素上。能夠認爲樣式表是層疊的薄透寫紙，上層覆蓋下層，但同時也能讓下層透過上層顯示出來。

一旦瀏覽器引擎計算好了樣式，接下來就要派上用場了！佈局引擎接下來會接手 DOM 和已計算的樣式，而且會考慮待繪製佈局所在的窗口大小。而後佈局引擎會分析該元素應用的全部樣式，並經過各類算法將每一個元素繪製在一個個內容盒子中。

頁面佈局繪製完畢後，是時候將頁面藍圖轉化成你所看見的實際頁面了。這一步驟稱爲 painting（繪製），這也是先前全部步驟的最終整合。每一個由佈局定義的內容盒子都將被繪製，其內容來自 DOM，其樣式源自 CSS。最終，從代碼一步步重組而成的頁面，展示在用戶眼中。

以上就是之前的瀏覽器引擎所作的事情。

當用戶滾動頁面的時候，瀏覽器會進行重繪來顯示原先在可見窗口外的頁面內容。然而，顯然用戶都喜歡滾動頁面！瀏覽器引擎清楚地意識到本身確定會被要求展現初始窗口之外的內容（也稱視口）。現代瀏覽器根據這個事實在頁面初始化的時候繪製了比視口更多的頁面內容。當用戶滾動頁面的時候，這部分用戶想要看的內容早就已經繪製完畢了。這樣的好處就是頁面滾動變得更快更流暢。這種技術是網頁合成的基礎，合成是一種減小所需繪製量的技術術語。

另外，咱們有時候也須要重繪部分頁面內容。好比用戶有可能正在觀看一個每秒 60 幀的視頻。也可能頁面上有一個圖片輪播或者滾動列表。瀏覽器可以檢測出頁面上哪一部份內容將要移動或者更新，而且會爲這些更新的內容建立一個新的圖層，而非從新渲染整個頁面。一個頁面能夠由多個彼此重疊的圖層構成。每一個圖層均可以改變定位方式、滾動位置、透明度或者在不觸發重繪的前提下控制圖層的上下位置！至關方便。

有時候一些腳本或者動畫會修改元素的樣式。這個時候，樣式引擎就須要從新計算這個元素的樣式（可能頁面上許多其餘元素也要從新計算），從新計算佈局（產生一次迴流），而後重繪整個頁面。隨着計算量的增長，這些操做會耗費不少時間，但只要發生的頻率低，那麼就不會對用戶體驗產生負面影響。

在現代 web 應用中，文檔結構常常會被腳本改變。而哪怕只是一點小改動，都會或多或少地觸發整個渲染流程：HTML 解析成 DOM、樣式計算、迴流、重繪。

Web 標準

不一樣瀏覽器解釋 HTML、CSS 和 JavaScript 的方式也不同。這就產生了各類影響：小到細微的視覺差別，大到用戶沒法在某些瀏覽器上正常瀏覽網站。近年來在現代互聯網中，大多數網站在不一樣瀏覽器下彷佛都表現的不錯，並且也沒有關注用戶具體使用的是什麼瀏覽器。那麼，不一樣瀏覽器又是如何達到這種程度的一致性體驗呢？

網站代碼的格式，以及代碼的解釋規則、頁面的渲染規則都是由一種由多方承認的文件定義的，即 Web 標準。來自瀏覽器廠商、Web 開發者、設計師等行業成員的表明組成的委員會制定了這些標準文檔。他們一塊兒肯定了對於給定的代碼片斷，瀏覽器引擎應該顯示的明確行爲。Web 標準包括 HTML、CSS 和 JavaScript 標準以及圖像、視頻、音頻等數據格式的標準。

爲何說 Web 標準是重要的？由於只要保證遵循了 Web 標準，就能夠開發出一個全新的瀏覽器引擎，這個引擎能夠處理互聯網上數以億計的網頁，並繪製出和其它瀏覽器同樣的結果。這也意味着在某些瀏覽器中才能運做的「祕密配方」再也不是祕密了（譯者注：例如，再也不須要 CSS 私有前綴）。另外，正由於 Web 標準的存在，用戶能夠憑本身的喜愛挑選瀏覽器。

摩爾定律的終結

過去，人們只有臺式電腦。曾經有一個相對保守的假設：計算機只會變得更快更強大。這個想法是基於摩爾定律的推測：集成電路上可容納的元器件的數目，約每隔 2 年便會增長一倍（所以半導體芯片的性能也將提高一倍、體積也將縮小一倍）。使人難以置信的是，這種趨勢一直持續到了 21 世紀，而且有人認爲這必定律仍然適用於當今最前沿的研究。那麼爲何在過去十年中，計算機的平均運算速度彷佛已經趨於穩定了？

顧客買電腦的時候不僅僅考慮運行速度，畢竟速度快的電腦極可能很是耗電、很是容易發熱還很是貴！有時候人們想要一臺續航時間良好的筆記本電腦。有時候呢，人們又想要一個微型的觸屏電腦，帶攝像頭，又小到能夠塞進口袋，而且電量足夠用一天！計算能力的進步已經讓這成爲可能（真的很驚人！），不過代價就是運行速度降低。正如你在飆車的時候沒法有效（或者說安全）地控制行車路線，你也沒法讓電腦超負荷計算的同時處理大量任務。如今的解決方案都是藉助於單 CPU 多核。所以，如今智能手機廣泛都有 4 個較小、較弱的計算核心。

不幸的是，過去的瀏覽器設計是基於摩爾定律（性能提高）會繼續有效的假設。另外，編寫可以充分利用多核 CPU 的代碼也是極爲複雜的。因此，咱們該如何在這個處處都是小型計算機的時代，開發一款高速又高效的瀏覽器呢？

咱們已經想到了！

在接下來的幾個月中，咱們將更進一步關注 Firefox 的變化，以及這些變化將如何更好地利用現代硬件來實現一個更快更穩定的瀏覽器，從而讓網站更加多姿多彩。

皮皮蝦，咱們走！

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。