剖析極速 CSS 引擎:Quantum CSS (原名Stylo)(上)

你可能聽過「量子專案」(Project Quantum),這是為了大幅加快 Firefox 速度而推動的全面改造 Firefox 引擎的計畫。我們一方面把部分引擎元件改為實驗性瀏覽器 Servo 的元件,另一方面,也針對其他元件進行大規模改良。

有人說,我們推動這個專案,就像幫飛行中的飛機換引擎一樣。但我們還是堅守目標,一個接一個元件地改進,希望透過每個元件的上線,陸續將 Firefox 的改變呈現在你的面前。

第一個源自 Servo 的重大元件更新 —名為 Quantum CSS(原名 Stylo)的全新 CSS 引擎 —現已於 Nightly 版本釋出以供測試。如果你想體驗和測試的話,請進入 about:config,找到 layout.css.servo.enabled,並將其設置為 true。

這個新引擎共運用到四個不同瀏覽器的尖端創新技術,才打造出有別於以往的全新超高速 CSS 引擎。

它善用現代硬體的優勢,運用使用者機器內所有核心來平行處理運算負載,進而達成執行速度加快 2 或 4、甚至高達 18 倍的成果。

以外,它還結合了其他瀏覽器的最新優化技術,所以,就算沒有平行運算,它仍舊會是疾如雷電的引擎。

CSS 引擎到底有何能耐?首先,我們先來看看 CSS 引擎,以及它如何與瀏覽器其他元件搭配。然後,我們再進一步了解 Quantum CSS 能如何使 CSS 引擎跑得更快。

CSS 引擎功用何在?

CSS 引擎是此瀏覽器渲染引擎的一部分。渲染引擎負責解析網站的 HTML 和CSS 檔案,並將之轉成顯示在螢幕上的畫素。

每個瀏覽器都有一渲染引擎。Chrome 的渲染引擎為 Blink,Edge 的叫EdgeHTML,Safari 的是 WebKit,Firefox 的引擎則名為 Gecko。

為了把檔案轉為畫素,所有的渲染引擎基本上都會做這些事:

  1. 將檔案剖析為瀏覽器可理解的物件,包括 DOM 在內。在這個階段,DOM 知道頁面的結構,也知道各元素之間的父/子關係,但不清楚這些元素應該是什麼模樣。

2.搞懂這些元素應該是什麼模樣。針對每個 DOM 節點,CSS 引擎都會一一確定哪些 CSS 規則適用,然後再為該 DOM 節點的每個 CSS 屬性設定一個值(value)。

3.確認每個節點的大小及其在螢幕上的位置,並為將在螢幕上顯示的每個東西生成方塊框(box,或做「盒子」)。這些方框不只代表 DOM 節點,DOM 節點內的東西也可有方框,如文本行。

4.繪製不同的盒子。這可能會有多層的情況,好比古早時代的手繪卡通,要用好幾層描圖紙來畫一樣。這樣就可以只改變一個層,而不必在其他層上重繪物件。

5.取得不同的繪圖層、運用只有合成器的屬性(如 transforms),並將它們變成一個圖像。這過程基本上就像是把各層疊在一起組合成圖片一般。之後,此圖像將被渲染在螢幕上。

也就是說,當 CSS 引擎開始計算樣式時,CSS 引擎手上有兩樣東西:

  • 一個 DOM 樹
  • 一份樣式規則的清單

它會逐一檢視每個 DOM 節點,並計算出各個 DOM 節點的樣式。在此過程中,它還會為 DOM 節點的各 CSS 屬性提供值(即使樣式表並未提供該屬性的值)。

我覺得這就像有一個人要填表格一樣。他必須幫每個 DOM 節點填一份表格,且表格上的所有欄位都不能留白。

要填好所有的表格,CSS 引擎必須做兩件事:

  • 找出哪些規則適用於哪些節點(也就是要做選擇器配對,selector matching)
  • 使用父(parent)級或預設值來填補缺少的值(即所謂的串接,cascade)

選擇器配對(Selector matching)

針對這個步驟,我們將把與 DOM 節點匹配的所有規則都加入清單。因為多個規則可達成配對,所以同一屬性可能會有多個宣告(declarations)。

此外,瀏覽器本身還會加入一些預設的 CSS(名為用戶代理樣式表)。CSS 引擎怎麼判斷該選哪個值呢?

這就是明確性(specificity)規則派上用場的地方。基本上,CSS 引擎基本上會產生一個試算表,並將宣告排入不同的列中。

具最高明確性的規則勝出。因此,根據此試算表,CSS 引擎會先填入它能填的值。

至於其他的部分,我們將使用到串接功能。

串接(cascade)

串接把 CSS 變得易於編寫和維護。透過串接,你可以設定 body 的顏色屬性,並知道 p 的文本、span 和 li 元素都會使用到該顏色(除非你有一個更明確的覆蓋(override))。

為此,CSS 引擎會檢視其表單上的空白框。如果其屬性為預設繼承,CSS 引擎便會往樹上方查看、確認是否其中一個祖先(ancestor)有值。如果沒有一個祖先有值、或該屬性不被繼承,CSS 引擎便將給予一個預設值。

到這裡,這個 DOM 節點的所有樣式都已計算完成。

補充說明:樣式結構共享

我剛給你看的表格有點不太真實。CSS 有數百種不同的屬性。如果 CSS 引擎為每個 DOM 節點的每個屬性都保留一個值的話,它應該會馬上用光記憶體。

實際的狀況是,引擎通常會進行所謂的樣式結構共享(style struct sharing)。它們把經常一塊出現的資料(如字體屬性)儲存在一個不同的物件中(即樣式結構),於是便不必保存一個物件內的所有屬性,而只要幫計算過的樣式物件提供指標(pointer)。如此一來,每個類別都會有一個指向具該 DOM 節點正確值之樣式結構的指標。

這可節省記憶體和時間。具類似屬性的節點(如兄弟姊妹般)只需指向同一結構,便可取得共享的屬性。因為許多屬性都是繼承而來,所以一個祖先元素便可與沒有指定其覆蓋之任一後代元素分享結構。

原文連結

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.