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

渲染引擎（the rendering engine）簡述

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

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

基本渲染過程

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

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

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

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

上面只是介紹了渲染引擎一般的處理流程，針對不同的渲染引擎具體步驟可能有所不同，就拿常見的webkit跟gecko來說吧。

首先是webkit的詳細渲染流程:

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

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

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