輸入一個url後瀏覽器幹了啥？（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圖像庫繪製的結果保存下來,交給瀏覽器來同瀏覽器界面一塊兒顯示

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

歡迎關注個人公衆號FE未道 ，不間斷更新， 咱們一塊兒腳踏實地，仰望星空。