從基礎(chǔ)架構(gòu)上我們也可以看到瀏覽器的重頭戲其實(shí)在于渲染引擎(又稱排版引擎)，很多頁(yè)面兼容性問(wèn)題的根源可以說(shuō)也皆來(lái)源于此。360瀏覽器HTML5跑分再高（http://html5test.com/），UI與交互再怎么不一樣，內(nèi)核還是一樣的。好了，那我們深入到渲染引擎內(nèi)部仔細(xì)看一下吧。

渲染引擎（the rendering engine）簡(jiǎn)述

渲染引擎的職責(zé)，正如字面上的意思就是負(fù)責(zé)從服務(wù)器端返回的HTML，XML，或者IMAGES等資源的渲染工作并顯示給最終用戶。通過(guò)瀏覽器 插件（plug-in or browser extension）技術(shù)，它也能顯示一些其他文檔格式的資源，如PDF，后期的文章會(huì)針對(duì)這種技術(shù)進(jìn)行一下說(shuō)明，本章重點(diǎn)描述渲染引擎的首要功能，即通 過(guò)渲染引擎顯示出經(jīng)過(guò)CSS樣式化的HTML和圖片結(jié)果。

前面已經(jīng)介紹過(guò)，firefox,chrome,safari 包括了兩種渲染引擎，火狐瀏覽器使用gecko，safari跟chrome（后來(lái)opera跟進(jìn)）使用webkit. Webkit是一個(gè)開(kāi)源的渲染引擎，起初只能用于linux平臺(tái)，后來(lái)蘋果公司apple對(duì)其源代碼進(jìn)行了擴(kuò)展改造，使其能運(yùn)行與mac跟windows 平臺(tái)，后起之秀chrome對(duì)其有進(jìn)行了一些列擴(kuò)充與推廣，使其越來(lái)越成為標(biāo)準(zhǔn)流行的渲染網(wǎng)頁(yè)引擎，webkit詳細(xì)介紹可參見(jiàn) http://webkit.org/。

基本渲染過(guò)程

用戶請(qǐng)求的資源通過(guò)瀏覽器的網(wǎng)絡(luò)層到達(dá)渲染引擎后，渲染工作開(kāi)始。每次渲染文檔通常不會(huì)超過(guò)8K的數(shù)據(jù)塊，其中基礎(chǔ)的渲染過(guò)程如下圖所示:       

渲染引擎首先解析HTML文檔，轉(zhuǎn)換為一棵DOM樹(shù)，此為***步。接下來(lái)不管是內(nèi)聯(lián)式，外聯(lián)式還是嵌入式引入的CSS樣式也會(huì)被解析，渲染出另 外一棵用于渲染DOM樹(shù)的樹(shù)-渲染樹(shù)(render tree) ，渲染樹(shù)包含帶有顏色，尺寸等顯示屬性的矩形，這些矩形的順序與顯示順序一致。然后就是對(duì)渲染樹(shù)的每個(gè)節(jié)點(diǎn)進(jìn)行布局處理，確定其在屏幕上的顯示位置。*** 就是遍歷渲染樹(shù)并用上一章提到的ＵＩ后端層將每一個(gè)節(jié)點(diǎn)繪制出來(lái)。

以上步驟是一個(gè)漸進(jìn)的過(guò)程，為了提高用戶體驗(yàn)，渲染引擎試圖盡可能快的把結(jié)果顯示給最終用戶。它不會(huì)等到所有ＨＴＭＬ都被解析完才創(chuàng)建并布局渲染樹(shù)。它會(huì)在從網(wǎng)絡(luò)層獲取文檔內(nèi)容的同時(shí)把已經(jīng)接收到的局部?jī)?nèi)容先展示出來(lái)。

不同渲染引擎具體不同的渲染流程

上面只是介紹了渲染引擎一般的處理流程，針對(duì)不同的渲染引擎具體步驟可能有所不同，就拿常見(jiàn)的webkit跟gecko來(lái)說(shuō)吧。

首先是webkit的詳細(xì)渲染流程:

火狐等瀏覽器的gecko渲染流程:

 從上面兩幅圖可以看出，盡管兩者使用了不同的“專業(yè)術(shù)語(yǔ)”，但是從圖上可以看出，兩者的渲染過(guò)程可謂大同小異，正是于此，我們可以再把具體的過(guò)程統(tǒng)一分離出來(lái)，接下來(lái)的四章會(huì)根據(jù)四個(gè)主要渲染過(guò)程進(jìn)行一下較為細(xì)致的說(shuō)明。

原文鏈接：http://www.cnblogs.com/luluping/archive/2013/04/05/3000461.html