文章同步到github《Webkit技術內幕》之頁面渲染過程 html
最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收穫，尤爲是對頁面渲染有了較深的認識。因爲功力有限，並且書中設計到較多的底層也沒法理解，因此本文主要整理和分享一下本身理解的基於Webkit內核瀏覽器的頁面渲染的總體過程，不作深刻介紹(也作不了深刻介紹)。
瀏覽器內核
瀏覽器之因此能呈現出更重頁面，正是因爲瀏覽器內核的存在，也被稱爲渲染引擎，主要做用就是，也就是能把HTML/CSS/JavaScript文本其相關的資源轉化轉化成可視化可交互的圖像頁面，這個過程就是渲染。
四大主流內核
| 內核 | 瀏覽器 | 內核識別碼 |
|---|---|---|
| Trident | IE、360 | -ms |
| Gecko | Firefox(火狐) | -moz |
| presto | Opera(歐朋) | -o |
| Webkit | Chrome(谷歌) safari(蘋果) | -webkit |
Webkit架構
本文主要是基於Webkit內核，因此先放一張整理Webkit架構圖(並不是所有模塊, 主要包含主要模塊),大體介紹一下Webkit的架構前端
自下而上主要分爲三層:java
- 1.操做系統層
- 2.Webkit渲染過程當中依賴的不少第三方模塊
- 3.Webkit層，主要包含webCore、渲染引擎層、嵌入式接口層，綁定層
1.操做系統層
由Webkit能夠運行在不一樣的操做系統上，瀏覽器也能夠運行在不一樣的操做系統上，另外與對磁盤和內存的操做都須要操做系統來操做，因此須要操做系統支持。說白了就是一切須要對硬件操做的程序都須要操做系統的支持。linux
2.第三方模塊層
資源的獲取、頁面的渲染等須要依賴第三方庫來完成，網絡庫、圖形庫、視頻庫等都是Webkit之因此能工做的基礎，Webkit來根據須要來使用相應的庫。git
3. WebKitCore
WebKitCore部分是全部瀏覽器共享的部分，是渲染網頁的基礎，包括HTML解釋器、CSS解釋器、SVG、DOM、渲染樹等github
- 1.HTML解釋器
解釋HTML文本的解釋器，把html文檔解析成DOM(文檔對象模型)樹，表示整個html文檔
- 2.CSS解釋器
問DOM樹中各個元素對象計算出樣式信息，後計算後面的網頁佈局作基礎
- 3.佈局
把DOM樹和解析後的CSS樹的信息結合起來，造成一個包含頁面全部元素和樣式的信息的一個內部表示模型
- 4.繪圖
使用第三方依賴的庫如2D/3D圖形庫等將佈局計算後的節點繪製成圖像
4. JavaScript引擎
對於JavaScript引擎有必要說一下，JavaScript引擎就是將JavaScript代碼解析處理並運行的環境，負責整個JavaScript程序的編譯及執行過程。web
1.webkit默認的引擎是JavaScriptCore引擎，對於不一樣瀏覽器對於引擎的實現JavaScript引擎的實現也不同，好比Chrome瀏覽器是基於V8引擎等。後端
2.另外在解析/語法分析，構建出"抽象語法樹"以後，會將"抽象語法樹"進行編譯，轉化爲一組機器指令，拿一個例子來講瀏覽器
var a = 1
JavaScript會建立一個變量a，並分配內存，將1這個值存儲在a的變量中。緩存
3.JavaScript能夠修改網頁內容，也就是修改DOM和和CSS樣式，事實上，也正是javaScript代碼經過DOM和CSSOM暴露出的接口來進行修改，從而改變頁面渲染的效果
5. 綁定層和嵌入式接口層
綁定層和嵌入式接口層最主要與Webkit項目的移植有關，就好比基於linux內核的CentOS、Ubuntu等系統同樣。嵌入式接口層主要提供給瀏覽器調用，不一樣瀏覽器廠商會基Webkit以及對外暴露的接口實現本身的功能。
頁面渲染過程
從輸入url開始總體介紹一下頁面的渲染流程，而後具體步驟再詳細加以說明
- 1.用戶輸入url按下回車後，瀏覽器開啓一個進程對url進行分析，若是是http協議，按照web方式處理
- 2.根據域名進行DNS解析，解析以後發送第二次get請求，進行HTTP協議會話，以獲取資源
- 3.此時進入到web服務器上的 Web Server，如 Apache、Tomcat、Node.JS 等web服務器;
- 4.繼續進入後端應用程序，如PHP、Java等找到對應請求處理，最後由web服務器傳送給瀏覽器資源
- 5.由於資源的位置以URL(統一資源定位符)來區分，發送請求時，若是本地有緩存，發送請求的同時會帶上緩存的相關信息，與服務器資源做比較，好比更新時間等，服務器若是沒有更新則返回304，直接使用緩存，不然向服務器請求資源。
- 5.瀏覽器開始下載HTML文檔
- 6.瀏覽器內核開始解析文檔(整個html文檔就是一大串字符串)，構建DOM樹，解析成DOM樹的過程當中，若是遇到JavaScript代碼，則交給JavaScript引擎來執行，等到DOM樹構建完成後觸發DOMContentLoaded事件
- 7.解析CSS，構建CSS樹，構建CSSOM(在瀏覽器控制檯輸入document.styleSheets按下回車就能夠看到styleSheetList的集合了)
- 8.CSS解析完成以後，在DOM樹的基礎上附加解釋後的樣式信息，造成RenderObject樹，在RenderObject節點建立的同時，webkit會根據網頁層次構建出RenderLayer樹，同時構建出一個虛擬的繪圖上下文(與平臺無關的抽象類)，最後根據繪圖上下文(須要依賴2D/3D庫)進行繪製，最終也就是用戶看到的可交互的頁面。
頁面渲染細節
上面介紹了頁面從輸入url發送請求後到頁面渲染的總體流程，下面補充一下在這整個過程當中的一些細節知識點，方面更好的理解頁面的渲染過程
1. 首先理解頁面是分層次的，好比說以下代碼片斷代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p>aaa</p>
<video src="xxx.mp4"></video>
</div>
</body>
</html>
當網頁構建層次的時候，html元素爲根層，此時建立一個層，html元素的全部子節點、子節點的子節點，依次類推，如dody，div，p爲普通元素，並不會建立新的層次接口，video元素須要進行建立新層來進行視頻處理和渲染。
以下狀況，都須要創建新的RenderLayer節點
備註: 圖片直接截取於《Webkit技術內幕》
2.從資源字節流到構建成DOM樹
備註: 圖片直接截取於《Webkit技術內幕》
- 1.分詞/詞法分析，從字節流到字符流流(串)，是分段的詞法解釋器會將字符串解釋成標記(至關於字典中的詞語)
如 var a = 1; var、a、=、1 、;。空格是否會被看成詞法單元，取決於空格在
這門語言中是否具備意義。
- 2.解析/語法分析，基於詞法解釋器生成的新標記，構建成「抽象語法樹」，解析器嘗試將其與某條語法規則進行匹配。若是發現了匹配規則，解析器會將一個對應於該標記的節點添加到解析樹中，而後繼續請求下一個標記
3.HTML文檔對應的DOM樹的對應關係
4.DOM樹和RenderObject樹之間的對應關係
備註: 圖片直接截取於《Webkit技術內幕》
5. RenderObject樹與RenderLayer樹之間的對應關係
多對一的關係，RenderObject多個節點能夠對應RenderLayer的一個層次結構
備註: 圖片直接截取於《Webkit技術內幕》
以上文章就是整理的頁面渲染總體流程，不少細節沒有具體講，好比解析html文檔時，利用棧來處理、繪製3D圖形的GPU加速等、因爲能力有限不敢多講，也難講清楚，這些仍是去看大神們具體的書比較，感興趣的小夥伴，《WebKit技術內幕》瞭解一下
本文主要參考資料: