加載與渲染
????瀏覽器的主要作用是將用戶輸入的“URL”轉變?yōu)榭梢暬瘓D像。按照某文檔的分析，這其中包含兩個過程，其一是網(wǎng)頁加載過程，就是從“URL”到構建DOM樹；其二就是網(wǎng)頁渲染過程，從DOM生成可視化圖像。
????網(wǎng)頁渲染有一個特性，通常視圖比屏幕可視化面積大。所以在渲染時一般加入滾動條，就用戶體驗來說，垂直方向的滾動條效果好過水平頁面的滾動條效果。
WebKit的渲染過程
????根據(jù)數(shù)據(jù)的流向，可以把過程分為三個階段，第一個階段就是從網(wǎng)頁的URL到構建完DOM樹，第二個階段是從DOM樹到構建完WebKit的繪圖上下文，第三個階段是從繪圖上下文生成最終的圖像。
第一階段
具體過程如下：
- 當用戶輸入網(wǎng)頁URL時，WebKit調用資源加載器加載該URL對應的網(wǎng)頁。
- 加載器依賴網(wǎng)絡建立連接，發(fā)送請求并接受答復。
- WebKit接受到各種網(wǎng)頁或者資源的鏈接，其中某些資源通過同步或者異步獲取。
- 網(wǎng)頁被交給HTML解釋器解釋為一系列詞語。
- 解釋器根據(jù)詞語構建節(jié)點（NODE），形成DOM樹。
- 如果節(jié)點是JavaScript代碼就調用JavaScript引擎解釋并執(zhí)行。
- JavaScript代碼可能會修改DOM樹的結構。
- 如果節(jié)點依賴其他資源，則調用資源加載器加載，但他們是異步的，不會阻礙當前DOM樹的繼續(xù)構建；如果是JavaScript資源URL（沒有標志異步方式），則需要停止當前DOM樹構建，直到JavaScript資源加載完畢并被JavaScript引擎執(zhí)行后才繼續(xù)DOM樹構建。
????上述過程中，網(wǎng)頁會發(fā)出“DOMConent”和DOM“onload”事件，分別在DOM樹構建完之后，以及DOM樹撿完并且網(wǎng)頁所以來的資源都加載完之后發(fā)生，因為某些資源的加載并不會阻礙DOM樹的創(chuàng)建，所以這兩個事件多數(shù)時候不是同時發(fā)生的。
第二階段
具體過程如下：
- CSS文件被CSS解釋器解釋成內部表示結構。
- CSS解釋器工作完之后，從DOM樹上附加解釋后的樣式信息，這就是RenderObject樹。
- RenderObject樹節(jié)點在創(chuàng)建時，WebKit會根據(jù)網(wǎng)頁的層次結構創(chuàng)建RenderLayer樹，同時創(chuàng)建一個虛擬上下文。
????上述過程中，RenderObject樹的建立并不代表DOM樹會被銷毀，直到網(wǎng)頁被銷毀，這四個內部結構將一直存在。
第三階段
具體過程如下：
- 繪圖上下文是一個與平臺無關的抽象類，它將每個繪圖操作橋街道不同的具體實現(xiàn)類，也就是繪圖具體實現(xiàn)類。
- 繪圖實現(xiàn)類也可能相當容易的實現(xiàn)，也有可能相當復雜的實現(xiàn)。在Chromium中，它需要合成器來實現(xiàn)復雜的多進程和GPU加速機制。
- 繪圖實現(xiàn)類將2D圖形庫和3D圖形庫繪制結果保存下來，交給瀏覽器來同瀏覽器界面一起顯示。
????上述過程實際上可能不會那么簡單，現(xiàn)在瀏覽器為了高效性和安全性，可能會引入復雜的機制。而且繪圖不像以前只有單純的軟件渲染，還有現(xiàn)在的GPU硬件渲染、混合渲染模型等方式。
總結
????上面介紹的是一個完整的渲染過程。現(xiàn)代網(wǎng)頁很多是動態(tài)網(wǎng)頁，渲染完成之后，由于網(wǎng)站動畫和或者與用戶的交互。瀏覽器會一直不斷重復渲染過程。
