渲染引擎
我們的參考瀏覽器 - Firefox屏轰，Chrome和Safari是建立在兩個渲染引擎上。
Firefox使用Gecko - 一個“自制”Mozilla渲染引擎叔遂。
Safari和Chrome都使用Webkit他炊。
Webkit是一個開源渲染引擎，作為Linux平臺的引擎啟動已艰，并被Apple修改為支持Mac和Windows痊末。有關(guān)更多詳細(xì)信息，請參閱
http://webkit.org/哩掺。
主流
呈現(xiàn)引擎將開始從網(wǎng)絡(luò)層獲取所請求的文檔的內(nèi)容凿叠。這通常是在8K塊。
之后嚼吞，這是渲染引擎的基本流程：
圖2：渲染引擎??的基本流程盒件。
呈現(xiàn)引擎將開始解析HTML文檔，并將標(biāo)簽轉(zhuǎn)換為稱為“內(nèi)容樹”的樹中的DOM節(jié)點舱禽。它將解析外部CSS文件和樣式元素中的樣式數(shù)據(jù)炒刁。樣式信息以及HTML中的可視化指令將用于創(chuàng)建另一個樹 - 渲染樹（Render Tree）。
渲染樹包含具有視覺屬性（如顏色和尺寸）的矩形誊稚。矩形以正確的順序顯示在屏幕上翔始。
在構(gòu)造渲染樹之后，它通過“ 布局(Layout)”過程里伯。
這意味著給每個節(jié)點在其應(yīng)該出現(xiàn)在屏幕上的確切坐標(biāo)绽昏。
下一個階段是繪畫（Painting）- 渲染樹將被遍歷，每個節(jié)點將使用UI后端圖層繪制俏脊。
重要的是要理解這是一個漸進的過程。
為了更好的用戶體驗肤晓，呈現(xiàn)引擎將盡力在屏幕上顯示內(nèi)容爷贫。
它不會等到所有的HTML被解析之后才開始構(gòu)建和布局渲染樹认然。
將對內(nèi)容的一部分進行解析和顯示，同時該過程繼續(xù)保持來自網(wǎng)絡(luò)的其余內(nèi)容漫萄。
主要流程示例
圖3：Webkit主流程
圖4：Mozilla的Gecko渲染引擎主流程（3.6）
從圖3和圖4可以看出卷员，盡管Webkit和Gecko使用略有不同的術(shù)語，但流程基本相同腾务。
Gecko調(diào)用可視化格式化元素的樹 - 幀樹（Frame tree）毕骡。每個元素是一個框架。Webkit使用術(shù)語“渲染樹（Render Tree）”岩瘦，它由“渲染對象（Render Objects）”組成未巫。Webkit使用術(shù)語“布局（Layout）”來放置元素，而Gecko將其稱為“Reflow”启昧⌒鸱玻“附件（Attachment）”是Webkit的術(shù)語，用于連接DOM節(jié)點和可視信息以創(chuàng)建渲染樹密末。一個次要的非語義差別是Gecko在HTML和DOM樹之間有一個額外的層握爷。它被稱為“內(nèi)容宿（Content Sink）”，是一個制作DOM元素的工廠严里。
