webKit的網頁渲染過程

瀏覽器的主要作用是將用戶輸入的“URL”轉變爲可視化圖像 ，其中包含兩個過程：

• 其一是網頁加載過程，就是從 URL到構建DOM樹
• 其二就是網頁渲染過程，從DOM生成可視化圖像
  
  其實這兩個過程也會交叉，我們可以統稱爲網頁的渲染過程
  網頁渲染有一個特性，通常視圖比屏幕可視化面積大。所以在渲染時一般加入滾動條，就用戶體驗來說，垂直方向的滾動條效果好過水平頁面的滾動條效果

這個過程中的數據和模塊包括：

數據：

• 網頁內容
• DOM
• 內部表示和圖像

模塊則包括

• HTML 解釋器
• css 解釋器
• javascript引擎
• 佈局和繪圖模塊

根據數據的流向，可以把過程分爲三個階段:

• 第一個階段就是從網頁的URL到構建完DOM樹
• 第二個階段是從DOM樹到構建完WebKit的繪圖上下文
• 第三個階段是從繪圖上下文生成最終的圖像

第一階段 從網頁的URL到構建完DOM樹

具體過程如下：

1. 當用戶輸入網頁URL時，WebKit調用資源加載器加載該URL對應的網頁
2. 加載器依賴網絡建立連接，發送請求並接受答覆。
3. WebKit接受到各種網頁或者資源的鏈接，其中某些資源通過同步或者異步獲取
4. 網頁被交給 HTML解釋器解釋爲一系列詞語
5. 解釋器根據詞語構建節點（NODE），形成DOM樹。
6. 如果節點是JavaScript代碼就調用JavaScript引擎解釋並執行
7. JavaScript代碼可能會修改DOM樹的結構
8. 如果節點需要依賴其他資源，例如圖片，css ，視頻等，調用資源加載器來加載他們但這個過程異步的，不會阻礙當前dom樹的構建，如果是javascript 資源url（沒有標記異步，通過async和defer）則需要停止當前DOM樹的創建 。直到js資源加載並執行完畢之後纔會繼續DOM樹的創建

上述過程中，網頁會發出“DOMConent”和DOM onload事件，分別在DOM樹構建完之後，以及DOM樹建完並且網頁所以來的資源都加載完之後發生，因爲某些資源的加載並不會阻礙DOM樹的創建，所以這兩個事件多數時候不是同時發生的

DOMConentLoad: DOM樹構建完之後
onload : DOM樹建完並且網頁所以來的資源都加載完

第二階段 webkit利用cssTree和DOMTree構建renderTree 直到繪圖上下文

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

1. CSS文件被CSS解釋器解釋成內部表示結構。
2. CSS解釋器工作完之後，在DOM樹上附加解釋後的樣式信息，這就是RenderObject樹
3. RenderObject節點在創建的同時,WebKit會根據網頁的層次信息創建RenderLayer樹,同時構建一個虛擬的繪圖上下文

RenderObject樹的簡歷並不表示DOM樹會被銷燬,事實上,上圖中的四個內部結構一直存在,直到網頁被銷燬,因爲它們對於網頁的渲染起了非常大的作用

第三個階段是 從繪圖上下文到最終的圖像(主要依賴2D和3D圖形庫)

1. 繪圖上下文是一個與平臺無關的抽象類,他將繪圖操作僑接到不同的具體實現類。
2. 需要Chromium的合成器來完成多進程和GPU加速機制
3. 繪圖實現類將2D圖像庫或者3D圖像庫繪製的結果保存下來,交給瀏覽器來同瀏覽器界面一起顯示

上面介紹的是一個完整的渲染過程.現代網頁很多是動態網頁,這意味着在渲染完成之後,由於網頁的動畫或者用戶的交互,瀏覽器其實一直在不同地重複執行渲染過程