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

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

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

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

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

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

圖2.2是Gecko主要流程示例：

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/snake-hand/archive/2013/06/12/3132880.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。