（整理自網(wǎng)絡(luò)）

一、四種瀏覽器內(nèi)核

瀏覽器核心的種類大約只有三到四個(gè)鹿鳖，它們分別是：Trident扁眯、Gecko、WebKit和Presto翅帜。

1姻檀、Trident核心，代表產(chǎn)品Internet Explorer

Trident只能應(yīng)用于Windows平臺(tái)涝滴，且是不開源的绣版。

2、Gecko核心歼疮，代表作品Mozilla Firefox

Gecko是一套開放源代碼的杂抽、以C++編寫的網(wǎng)頁(yè)排版引擎。

3韩脏、WebKit核心默怨，代表作品Safari、Chrome

webkit 是一個(gè)開源項(xiàng)目主要用于Mac OS系統(tǒng)骤素，它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快愚屁。主要代表作品有Safari和Google的瀏覽器Chrome济竹。

4、Presto核心霎槐，代表作品Opera

速度最快的引擎送浊，這也是Opera被公認(rèn)為速度最快的瀏覽器的基礎(chǔ)。

殼子瀏覽器：

自己本身不帶內(nèi)核丘跌，而是直接調(diào)用本機(jī)其他瀏覽器的內(nèi)核袭景，來(lái)實(shí)現(xiàn)瀏覽的功能。

由于IE瀏覽器在國(guó)內(nèi)的普及率非常高闭树，所以造成了很多網(wǎng)上銀行和支付系統(tǒng)只支持IE的Trident內(nèi)核耸棒，其他瀏覽器訪問(wèn)根本無(wú)法進(jìn)行正常支付和轉(zhuǎn)賬等業(yè)務(wù)。很多瀏覽器開發(fā)商就運(yùn)用了殼子瀏覽器的特性推出了“雙核”瀏覽器报辱，帶有兩種瀏覽模式与殃，其原理就是本身帶一內(nèi)核，開啟兼容模式后，調(diào)用本機(jī)上的ie內(nèi)核幅疼，來(lái)實(shí)現(xiàn)雙引擎功能米奸。

二、瀏覽器的主要功能

瀏覽器的主要功能是將用戶選擇的web資源呈現(xiàn)出來(lái)爽篷，它需要從服務(wù)器請(qǐng)求資源悴晰，并將其顯示在瀏覽器窗口中，資源的格式通常是HTML逐工，也包括PDF铡溪、image及其他格式。用戶用URI（Uniform Resource Identifier統(tǒng)一資源標(biāo)識(shí)符）來(lái)指定所請(qǐng)求資源的位置钻弄，在網(wǎng)絡(luò)一章有更多討論佃却。

HTML和CSS規(guī)范中規(guī)定了瀏覽器解釋html文檔的方式，由W3C組織對(duì)這些規(guī)范進(jìn)行維護(hù)窘俺，W3C是負(fù)責(zé)制定web標(biāo)準(zhǔn)的組織饲帅。

三、瀏覽器的主要構(gòu)成

1. 用戶界面 － 包括地址欄瘤泪、后退/前進(jìn)按鈕灶泵、書簽?zāi)夸浀龋簿褪悄闼吹降?b>除了用來(lái)顯示你所請(qǐng)求頁(yè)面的主窗口之外的其他部分对途。

2. 瀏覽器引擎 － 用來(lái)查詢及操作渲染引擎的接口赦邻。

3. 渲染引擎（上文提到的瀏覽器內(nèi)核） － 用來(lái)顯示請(qǐng)求的內(nèi)容，例如实檀，如果請(qǐng)求內(nèi)容為html惶洲，它負(fù)責(zé)解析html及css，并將解析后的結(jié)果顯示出來(lái)膳犹。

4. 網(wǎng)絡(luò) － 用來(lái)完成網(wǎng)絡(luò)調(diào)用恬吕，例如http請(qǐng)求，它具有平臺(tái)無(wú)關(guān)的接口须床，可以在不同平臺(tái)上工作铐料。

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

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

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

渲染引擎很重要坦刀，單獨(dú)詳細(xì)介紹一下：

渲染引擎首先通過(guò)網(wǎng)絡(luò)獲得所請(qǐng)求文檔的內(nèi)容举塔，在取得內(nèi)容之后的基本流程：

a. 解析html以構(gòu)建dom樹

渲染引擎開始解析html绑警，并將標(biāo)簽轉(zhuǎn)化為內(nèi)容樹中的dom節(jié)點(diǎn)。接著央渣，它解析外部CSS文件及style標(biāo)簽中的樣式信息计盒。

b. 構(gòu)建render樹

Render樹由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上芽丹。

（關(guān)于render樹：

瀏覽器在構(gòu)造DOM樹的同時(shí)也在構(gòu)造著另一棵樹Render Tree,與DOM樹相對(duì)應(yīng)叫它Render樹北启，我們知道DOM樹為javascript提供了一些列的訪問(wèn)接口（DOM API），但這棵樹是不對(duì)外的拔第。它的主要作用就是把HTML按照一定的布局與樣式顯示出來(lái)咕村，用到了CSS的相關(guān)知識(shí)。

每一個(gè)Render樹的節(jié)點(diǎn)稱之為renderer或者render object蚊俺，renderer包含了一個(gè)dom對(duì)象以及它的樣式懈涛。

具體顯示的時(shí)候，每一個(gè)renderer體現(xiàn)了一個(gè)矩形區(qū)塊的東西泳猬，即我們常說(shuō)的CSS盒子模型的概念批钠，它本身包含了一些幾何學(xué)相關(guān)的屬性，如width得封，position埋心，display等。

可以這么說(shuō)忙上，沒(méi)有DOM樹就沒(méi)有Render樹拷呆，但是它們之間可不是簡(jiǎn)單的一對(duì)一的關(guān)系。我們已經(jīng)知道了render樹是用于顯示的疫粥，那不可見的元素當(dāng)然不會(huì)在這棵樹中出現(xiàn)了茬斧，譬如<header>。）

c. ?布局render樹?

確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)梗逮。

d. ?繪制render樹

即遍歷render樹啥供，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)。

雖然abcd這個(gè)過(guò)程是逐步完成的库糠，但為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上涮毫，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹瞬欧。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容