1.主流瀏覽器

? IE（IE內(nèi)核 or Trident）、Firefox（Gecko）、Safari（webkit）、Chrome（webkit）及Opera（Presto）

內(nèi)核也就是所謂的渲染引擎或排版引擎

2.瀏覽器的構(gòu)成

主要組件包括：

1. 用戶界面 － 包括地址欄、后退/前進按鈕、書簽?zāi)夸浀?/p>

2. 瀏覽器引擎 － 用來查詢及操作渲染引擎的接口。

3. 渲染引擎 － 用來顯示請求的內(nèi)容，負(fù)責(zé)解析html及css，并將解析后的結(jié)果顯示出來。

4. 網(wǎng)絡(luò) － 用來完成網(wǎng)絡(luò)調(diào)用，例如http請求

5. UI后端 － 用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口。

6. JS解釋器 － 用來解釋執(zhí)行JS代碼。

7. 數(shù)據(jù)存儲 － 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)，這是一種輕量級完整的客戶端存儲技術(shù)

3.渲染引擎（The rendering engine）

? ? 解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹

渲染引擎基本流程

Gecko--frame樹--回流

webkit--render樹--布局

Gecko稱可見的格式化元素組成的樹為frame樹，每個元素都是一個frame，webkit則使用render樹這個名詞來命名由渲染對象組成的樹。Webkit中元素的定位稱為布局，而Gecko中稱為回流。Webkit稱利用dom節(jié)點及樣式信息去構(gòu)建render樹的過程為attachment，Gecko在html和dom樹之間附加了一層，這層稱為內(nèi)容接收器，相當(dāng)制造dom元素的工廠。

4.簡化流程

?用戶輸入網(wǎng)址---（首次）--瀏覽器向服務(wù)器發(fā)出請求---服務(wù)器返回HTML

瀏覽器加載HTML發(fā)現(xiàn)CSS文件---向服務(wù)器請求CSS文件--服務(wù)器返回CSS

瀏覽器發(fā)現(xiàn)img,開始請求圖片，同時渲染后續(xù)的代碼--返回圖片--重新渲染

發(fā)現(xiàn)JS文件，阻塞下載，同時會引起DOM樹的刷新，重新渲染

講解的很詳細，鏈接：http://kb.cnblogs.com/page/129756/