瀏覽器核心渲染引擎工作流程

瀏覽器解析流程

1、載入

• 資源載入器開啟http執行緒，獲取html頁面。
• 獲取頁面之後，交由html直譯器解析稱dom節點，並構建成dom樹。
• 在構建dom樹的時候，如果遇到script標籤，則呼叫javascript引擎進行解析。
• 在構建dom樹的時候，如果遇到css，圖片，音訊，則呼叫資源載入器進行資源的下載
• 注：這裡面script檔案的下載是阻塞dom樹生成的，而css，圖片，音訊檔案的下載是和dom樹的建立並行的。

2、渲染

• css檔案下載之後，呼叫css直譯器解釋css檔案，並依賴dom樹生成renderObject樹*
• renderObject樹再根據網頁的層次結構，構建renderLayer樹和繪圖上下文
• 最後由繪圖上下文繪製最終的影象。

使用者輸入www.baidu.com過程

• 根據url進行快取查詢IP地址，如果快取沒有，尋找DNS伺服器。最終找到url對應的IP地址。
• 呼叫資源管理器，開啟http執行緒，http GET baidu的網頁。傳輸層三次握手。
• 獲取網頁之後，交友html直譯器解析成DOM樹
• 遇到了css資源和圖片資源，非同步下載
• 遇到script標籤，阻塞下載並解析
• 發現js程式碼改變了dom結構，引起dom樹的改變
• dom樹構建完畢，開始呼叫css解析器解析css檔案，生成renderobject樹
• 根據層次結構生成renderlayer樹和繪圖上下文。
• 根據繪圖上下文呼叫作業系統的繪製工具繪製網頁。