前言
此篇爲翻譯文章，原篇在這裏:點擊查看
渲染引擎
渲染引擎—-渲染引擎的職責當然是渲染。它負責將請求的內容顯示在瀏覽器的窗口上。默認情況下，渲染引擎可以顯示HTML文檔和XML文檔以及圖片。但是它可以通過插件（一種瀏覽器擴展程序）來顯示其他類型的資源。比如通過PDF查看器插件來顯示PDF。我們會在單獨的章節來討論插件和擴展程序。在這章，我們將重點介紹——使用CSS格式化的HTML和圖片的顯示。
渲染引擎
我們引用的瀏覽器 - Firefox，Chrome和Safari都建立在這兩個渲染引擎上。Firefox使用Gecko——Mozilla“自制”的渲染引擎。Safari和Chrome都採用的是Webkit。Webkit是一個開源渲染引擎，作爲Linux平臺的引擎開始，由Apple修改以支持Mac和Windows。
主要的流程
渲染引擎將從網絡層開始獲取所請求文檔的內容，這通常會在8K大小的塊中完成。
之後，下面就是渲染引擎的基本流程：
渲染引擎開始解析HTML文檔，將其中的標籤轉變爲名爲“內容樹”的DOM節點。例如：
<html>
<body>
<p> Hello World </p>
<div> <img src="example.png"/></div>
</body></html>將被翻譯成下面的這個DOM樹：
樹的根節點是“document”對象。
接下來，渲染引擎將解析外部CSS文件和樣式元素中的樣式數據。樣式信息和HTML將會被用來構建另一個樹——渲染樹。
渲染樹包含具有顏色和尺寸等屬性的盒子。 這些盒子以正確的順序顯示在屏幕上。
在渲染樹構建結束後會經歷一個“佈局”的過程。這個過程意味着給每個節點它應該出現在屏幕上的準確的座標。
下一個階段就是繪製——渲染樹將會被遍歷，每個節點將使用UI後端層進行繪製。瞭解這個過程是很重要的。
爲了更好的用戶體驗，渲染引擎將盡快在屏幕上顯示內容。因此它不會等到所有的HTML都被解析後，纔開始構建和佈局渲染樹。內容的一部分會被解析和顯示，而流程將繼續解析來自網絡的其餘內容。
主要流程示例
webkit主要流程：
Mozilla的Gecko的流程示例：
從以上兩圖可以看出，雖然Webkit和Gecko使用的術語略有不同，但流程基本相同。
- Gecko調用的是框架樹。每個元素都是一個框架。Webkit使用的術語是渲染樹，它由渲染對象組成（“Render Objects”）。
- Webkit使用術語“佈局”來放置元素，而Gecko稱它爲“迴流”。
- “附件”是Webkit連接DOM節點和樣式信息來創建渲染樹的術語。一個小的非語義差異是Gecko在HTML和DOM樹之間有一個額外的層，它被稱爲“內容池”，是一個用於生成DOM元素的工廠。
下一章我們將會介紹渲染過程中非常重要的一部——解析，點擊查看文章：《瀏覽器原理（三）——渲染過程之解析》