WebKit 渲染過程

webkit筆記，主要來自 朱永盛 《WebKit技術內幕》 學習筆記，轉載就註明原著，該書是國內僅有的Webkit內核的書籍，學習的好導師，推薦有興趣的朋友能夠購買

 

Webkit渲染過程包括不少數據和模塊

     數據：網頁內容，DOM樹，內部表示，圖像

     模塊：HTML解釋器，CSS解釋器，JavaScript引擎，佈局和繪圖模塊

根據數據的方向，渲染分三個階段

1，網頁的URL 到構建完DOM 樹

2，DOM樹 到 構建完 Webkit的繪圖上下文

3，繪圖上下文 到 最終的圖像

下面是詳細的對三個步驟的描述（本應該虛線，表示依賴關係）

              從網頁URL 到 DOM 樹

 

上圖描述的是從 網頁URL 到 構建完 DOM樹這個過程，數字表示的是基本順序，也不是嚴格的一致，由於這個過程可能重複而且交叉

具體過程：

1，當 user 輸入網頁URL的時候，WebKit 調用其資源加載器 加載該 URL對應的網頁

2，加載器依賴網絡模塊創建鏈接，發送請求並接受答覆

3，WebKit接受各類網頁或者資源的數據，其中某些資源多是 同步 或 異步 獲取的

4，網頁被交給HTML解釋器轉變爲一系列的詞語( Token )

5，解釋器根據詞語構建節點（ Node ），造成 DOM 樹

6，若是節點是JavaScript代碼的話，調用JavaScript引擎解釋並執行

7，JavaScript 代碼可能會修改　DOM 樹的結構

8，若是節點須要依賴其餘資源，例如 圖片、CSS、視頻 等，調用資源加載器來加載它們，可是它們是異步的，不會阻礙當前　DOM 樹的建立

   若是是JavaScript資源URL（沒有標記異步方式），則須要中止當前 DOM 樹的建立，直到 JavaScript 的資源加載並被JavaScript引擎執行後才繼續DOM樹的建立

 

在上述過程當中，網頁在加載和渲染過程當中會發出 "DOMConent" 事件和 DOM 的 "onload" 事件，分別在 DOM 樹構建完以後，以及 DOM 樹建完而且網頁所依賴的資源都

加載完以後發生，由於某些資源的加載並不會阻礙 DOM 樹的建立，因此這兩個事件多數時候不是同時發生的

 

接下來就是 WebKit利用 CSS 和 DOM 樹構建 RenderObject 樹 直到 繪圖上下文

            從 CSS 和 DOM 樹 到 繪圖上下文

 

這一階段 的具體過程以下：

1， CSS 文件 被 CSS 解釋器 解釋成內部表示結構

2， CSS 解釋器工做完以後，在 DOM 樹上附加解釋後的樣式信息，這就是 RenderObject 樹

3， RenderObject 節點在建立的同時，WebKit會根據網頁的層次結構 建立 RenderLayer 樹，同時構建一個虛擬的繪圖上下文。

    其實這中間還有複雜的內部過程，具體後面章節中介紹

 

RenderObject樹的創建並不表示 DOM 樹會被銷燬，事實上，上述圖中的四個內部表示結構一直存在，直到網頁被銷燬，由於它們對於網頁的渲染起了很是大的做用

 

最後就是根據繪圖上下文來生成最終的圖像，這一過程主要依賴於 2D 和 3D 圖像庫（都應該是曲線）

               從繪圖上下文 到 最終的圖像

 

圖中這一階段對應的具體過程以下：

1，繪圖上下文是一個與平臺無關的抽象類，它將每一個繪圖操做橋接到不一樣的具體實現類，也就是繪圖具體實現類

2，繪圖實現類也可能有簡單的實現，也有可能有複雜的實現。在Chromium中，它的實現至關複雜，須要Chromium的合成器來完成複雜的多進程 和 GPU加速機制 。後面詳述

3，繪圖實現類將 2D 圖形庫 或者 3D 圖形庫 繪製的結果保存下來，交給瀏覽器來同瀏覽器界面一塊兒顯示

這一過程實際上可能不想圖中描述的那麼簡單，現代瀏覽器爲了繪圖上的高效性 和 安全性，可能會在這一過程當中引入複雜的機制。 並且，繪圖也從以前單純的軟件渲染，

到如今的GPU 硬件渲染、混合渲染模型等方式，這些一樣會以之後加以剖析