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

渲染引擎（the rendering engine）簡述

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

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

基本渲染過程

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

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

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

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

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

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

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

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

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