渲染引擎的功能就是渲染，在瀏覽器上顯示請求的內容。
默認情況下，渲染引擎可以顯示HTML和XML文檔和圖像。他也可以顯示其他類型的插件(瀏覽器擴展)。例如顯示PDF使用PDF瀏覽器插件。
我們將用一個特殊的章節來討論插件和擴展。在這個章節中，我們重點來關注使用CSS樣式渲染的HTML和圖片。

一、渲染引擎：
我們的參考瀏覽器——FF、Chrome、Safrai都是建立在兩個渲染引擎下。
FF使用Gecko——“自制”Mozilla渲染引擎，Safrai和Chrome都使用Webkit引擎。
Webkit是一個開源的渲染引擎，開始時適用于linux平臺，但是經過Apple公司修改之后開始支持Mac和windows系統。
獲取更多詳細信息，參考：http://webkit.org。

二、主要流程：
渲染引擎開始從網絡層獲取請求的文檔內容。通常會在8K的塊。
下圖2.0是渲染引擎的基本流程：

渲染引擎開始解析HTML文檔，并且把HTML標簽轉化為一個被叫做“內容樹”的DOM樹，它將
解析CSS樣式，包括外部樣式和內嵌樣式。樣式數據和HTML中的顯示控制將共同用來創建另一棵樹——渲染樹。
渲染樹包含帶有顏色和尺寸等顯示屬性的矩形，這個矩形的順序與顯示順序一致。

渲染樹構建完成后就是“布局”處理。也就是確定每個節點在屏幕上的確切顯示位置。 下一個步驟就是繪制，
遍歷渲染樹并用UI后端層將每一個節點繪制出來。

一定要理解，這是一個緩慢(漸進)的過程，為了更好的用戶體驗，渲染引擎將盡可能的把內容顯示到屏幕上。
它不會等到所有的HTML被解析完才開始創建和布局渲染樹。它會在處理后續內容的同時把已經處理過的內容顯示出來。
圖2.1是Webkit主要流程示例：

圖2.2是Gecko主要流程示例：

從圖2.1和圖2.2可以看出雖然Webkit和Gecko使用術語稍微不同，主要流程還是基本相同的。
Gecko 里把格式化好的可視元素稱做“幀樹”（Frame tree）。每個元素就是一個幀（frame）。 Webkit 則使用”渲染樹”這個術語，渲染樹由”渲染對象”組成。
Webkit 里使用”layout”表示元素的布局，Gecko則稱為”Reflow”。Webkit使用”Attachment”來連接DOM節點與可視化信息以構建渲染樹。
一個非語義上的小差別是Gecko在HTML與DOM樹之間有一個附加的層 ，稱作”content sink”，是創建DOM對象的工廠。我們會討論流程中的每一部分。

?

轉載于:https://www.cnblogs.com/snake-hand/archive/2013/06/12/3132880.html

總結

以上是生活随笔為你收集整理的浏览器是如何工作的系列：渲染引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。