讓我們回顧一下這個過程中的數據和模塊，數據包括網頁內容、DOM、內部表示和圖像，模塊則包括HTML解釋器、CSS解釋器、JavaScript引擎以及布局和繪圖模塊。下面深入這些模塊并對它們做進一步的細化。

根據數據的流向，這里將渲染過程分成三個階段，第一個階段是從網頁的URL到構建完DOM樹，第二個階段是從DOM樹到構建完WebKit的繪圖上下文，第三個階段是從繪圖上下文到生成最終的圖像。

為了描述這個過程，下面筆者會將WebKit中的一些細節展示給大家，可能其中一些對讀者來說很陌生，不過沒關系，筆者會逐步來分析它們。圖2-6顯示的是將渲染過程分為三個階段的示意圖，主要是針對WebKit中的邏輯來描述的。

圖2-6描述的是從網頁URL到構建完DOM樹這個過程，數字表示的是基本順序，當然也不是嚴格一致，因為這個過程可能重復并且可能交叉。

具體的過程如下。

1.?當用戶輸入網頁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樹直到繪圖上下文，如圖2-7所示的過程。

這一階段的具體過程如下。

1.?CSS文件被CSS解釋器解釋成內部表示結構。

2.?CSS解釋器工作完之后，在DOM樹上附加解釋后的樣式信息，這就是RenderObject樹。

3.?RenderObject節點在創建的同時，WebKit會根據網頁的層次結構創建RenderLayer樹，同時構建一個虛擬的繪圖上下文。其實這中間還有復雜的內部過程，具體在后面專門的章節做詳細介紹。

RenderObject樹的建立并不表示DOM樹會被銷毀，事實上，上述圖中的四個內部表示結構一直存在，直到網頁被銷毀，因為它們對于網頁的渲染起了非常大的作用。

最后就是根據繪圖上下文來生成最終的圖像，這一過程主要依賴2D和3D圖形庫，如圖2-8所示。

圖中這一階段對應的具體過程如下。

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

2.?繪圖實現類也可能有簡單的實現，也可能有復雜的實現。在Chromium中，它的實現相當復雜，需要Chromium的合成器來完成復雜的多進程和GPU加速機制，這在后面會涉及。

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

這一過程實際上可能不像圖中描述的那么簡單，現代瀏覽器為了繪圖上的高效性和安全性，可能會在這一過程中引入復雜的機制。而且，繪圖也從之前單純的軟件渲染，到現在的GPU硬件渲染、混合渲染模型等方式，這些同樣會以單獨的章節加以剖析。

上面介紹的是一個完整的渲染過程。現代網頁很多是動態網頁，這意味著在渲染完成之后，由于網頁的動畫或者用戶的交互，瀏覽器其實一直在不停地重復執行渲染過程。

?

轉載于:https://blog.51cto.com/snaile/1715437

總結

以上是生活随笔為你收集整理的weblit渲染过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。