呈現引擎

　　本文所討論的瀏覽器（Firefox、Chrome 瀏覽器和 Safari）是基於兩種呈現引擎構建的。Firefox 使用的是 Gecko，這是 Mozilla 公司“自制”的呈現引擎。而 Safari 和 Chrome 瀏覽器使用的都是 Webkit。

　　Webkit 是一種開放源代碼呈現引擎，起初用於 Linux 平臺，隨後由 Apple 公司進行修改，從而支持蘋果機和 Windows。有關詳情，請參閱 webkit.org。

主流程

　　呈現引擎一開始會從網絡層獲取請求文檔的內容，內容的大小一般限制在 8000 個塊以內。

　　然後進行如下所示的基本流程：



圖：呈現引擎的基本流程。
 
　　呈現引擎將開始解析 HTML 文檔，並將各標記逐個轉化成“內容樹”上的 DOM 節點。同時也會解析外部 CSS 文件以及樣式元素中的樣式數據。HTML 中這些帶有視覺指令的樣式信息將用於創建另一個樹結構：呈現樹。

　　呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。

　　呈現樹構建完畢之後，進入“布局”處理階段，也就是為每個節點分配一個應出現在屏幕上的確切坐標。下一個階段是繪制 
 
- 呈現引擎會遍歷呈現樹，由用戶界面後端層將每個節點繪制出來。

　　需要著重指出的是，這是一個漸進的過程。為達到更好的用戶體驗，呈現引擎會力求盡快將內容顯示在屏幕上。它不必等到整個 HTML 文檔解析完畢之後，就會開始構建呈現樹和設置布局。在不斷接收和處理來自網絡的其余內容的同時，呈現引擎會將部分內容解析並顯示出來。

深入解析瀏覽器的幕後工作原理(二) 呈現引擎