從今天起，我們重新認(rèn)識(shí)瀏覽器（上）

倪俊杰

編者按：當(dāng)今世界，信息技術(shù)日新月異，互聯(lián)網(wǎng)正在改變社會(huì)和生活的方方面面，引領(lǐng)了社會(huì)產(chǎn)生新變革，創(chuàng)造了人類生活新空間。上網(wǎng)，已經(jīng)像吃飯一樣，成為人們每天不可或缺的“必修課”。當(dāng)我們已經(jīng)習(xí)慣了打開瀏覽器，輸入網(wǎng)址就能輕松連接世界的時(shí)候，是否有過(guò)疑惑：這個(gè)小小的瀏覽器是如何將我們“帶”到世界的各個(gè)角落的？瀏覽器的運(yùn)行機(jī)制是什么？瀏覽器還有哪些新玩法？相信會(huì)有很多讀者也會(huì)對(duì)此感興趣，我們將從本期開始帶領(lǐng)大家重新認(rèn)識(shí)瀏覽器。

通過(guò)一個(gè)窗口就能夠連接世界。當(dāng)你用瀏覽器時(shí)有沒(méi)有想過(guò)瀏覽器是怎么來(lái)的？為什么瀏覽器能夠上網(wǎng)？瀏覽器有哪些奧秘？伴隨著各種各樣的疑問(wèn)，我們先來(lái)了解瀏覽器的發(fā)展歷史。

小窗口，大世界

瀏覽器的發(fā)展史，可以說(shuō)是眾多瀏覽器豪門的爭(zhēng)霸史，當(dāng)然，也是一段血淚史。我們先來(lái)看百度統(tǒng)計(jì)公布的最近6個(gè)月的瀏覽器市場(chǎng)份額情況（如圖1）。排名第一的是谷歌公司的Chrome瀏覽器，占據(jù)了半壁江山。事實(shí)上，Chrome瀏覽器并不是最早的瀏覽器，而是“半路殺出的程咬金”。

世界上最早的瀏覽器，是Timothy John Berners-Lee在1990年發(fā)明的網(wǎng)頁(yè)瀏覽器WorldWideWeb。從那時(shí)起，瀏覽器的發(fā)展就和網(wǎng)絡(luò)的發(fā)展聯(lián)系在了一起。后來(lái)又改名為Erwise瀏覽器，采用圖形化界面，由羅伯特·卡里奧發(fā)起開發(fā)的。由此，便開啟了瀏覽器的爭(zhēng)霸史了。

1993年，馬克·安德森發(fā)布了Mosaic瀏覽器。不過(guò)，他很快辭職并成立了自己的公司（網(wǎng)景通訊公司），發(fā)布了當(dāng)時(shí)世界上最流行的瀏覽器Netscape，市場(chǎng)占有率一度達(dá)到90%。網(wǎng)景公司的瀏覽器發(fā)展史就像一部豪門爭(zhēng)斗劇，起伏跌宕，很有意思。

這時(shí)，科技巨頭微軟坐不住了，急忙從其他公司購(gòu)買了瀏覽器技術(shù)，發(fā)布Internet Explorer，也就是IE瀏覽器。由此掀起了軟件巨頭微軟和網(wǎng)景之間的瀏覽器大戰(zhàn)，也同時(shí)加快了互聯(lián)網(wǎng)的發(fā)展。不過(guò)，與Netscape公司不同的是，微軟借助Windows操作系統(tǒng)的優(yōu)勢(shì)，直接捆綁了IE。說(shuō)白了，微軟免費(fèi)贈(zèng)送IE瀏覽器，只要購(gòu)買了操作系統(tǒng)就可以直接使用。這樣一來(lái)，IE在網(wǎng)頁(yè)瀏覽器市場(chǎng)就占據(jù)了主導(dǎo)地位，其市場(chǎng)占有率于2002年最高時(shí)超過(guò)95%。

胳膊擰不過(guò)大腿。1998年，Netscape在與微軟競(jìng)爭(zhēng)失利以后，為了挽回市場(chǎng)，公布旗下所有軟件以后的版本皆為免費(fèi)，并開放Netscape瀏覽器的源代碼，成立了非正式組織Mozilla Application Suite。可惜的是，Netscape還是在1998年底被收購(gòu)了。直到2002年，又派生出了Phoenix（后改名Firebird，最后又改為Firefox）瀏覽器，也總算保留了“豪門血脈”，在市場(chǎng)上還占有一席之地。

在此期間，還出現(xiàn)了其他瀏覽器。比如Opera，是挪威Opera Software ASA公司旗下的一個(gè)靈巧的瀏覽器，發(fā)布于1996年。它在手持電腦上十分流行，不過(guò)它在個(gè)人電腦網(wǎng)絡(luò)瀏覽器市場(chǎng)上的占有率較小。2003年，蘋果公司在蘋果手機(jī)上開發(fā)了Safari瀏覽器，并利用自己得天獨(dú)厚的手機(jī)市場(chǎng)份額使Safari瀏覽器迅速成為世界主流瀏覽器。Safari是現(xiàn)在蘋果默認(rèn)的瀏覽器。Lynx瀏覽器是Linux市場(chǎng)上十分流行的瀏覽器。它是全文字模式的瀏覽器，視覺(jué)上并不太好。還有一些有著進(jìn)階功能的同類型瀏覽器，如Links和它的分支ELinks。

正當(dāng)大家覺(jué)得瀏覽器的競(jìng)爭(zhēng)要消停了的時(shí)候，2008年Chrome橫空出世。因Chrome具有界面簡(jiǎn)潔、加載快速、數(shù)據(jù)安全等特點(diǎn)，其市場(chǎng)份額逐步攀升。微軟意識(shí)到Chrome在逐步侵蝕自己的市場(chǎng)時(shí)，開始頻繁更新IE。2011年IE9發(fā)布，2012年IE10發(fā)布，2013年IE11發(fā)布，最后IE的代碼實(shí)在適應(yīng)不了新的要求的WEB技術(shù)，就重新開發(fā)了一個(gè)名為“Edge”的瀏覽器用來(lái)取代IE，但還是擋不住Chrome成為市場(chǎng)份額第一的命運(yùn)。據(jù)最新消息，微軟表示Edge也將采用Chrome內(nèi)核，看來(lái)還是值得期待的。

有人的地方就有江湖，不管如何，瀏覽器之間的斗爭(zhēng)永遠(yuǎn)不會(huì)停歇。

瀏覽器，不簡(jiǎn)單

既然要認(rèn)識(shí)瀏覽器，就肯定要知道瀏覽器是由哪些部件組成的。

1.瀏覽器的組成

瀏覽器一般由七個(gè)模塊組成：User Interface（用戶界面）、Browser engine（瀏覽器引擎）、Rendering engine（渲染引擎）、Networking（網(wǎng)絡(luò)）、JavaScript Interpreter（JS解釋器）、UI Backend（UI后端）、Date Persistence（數(shù)據(jù)持久化存儲(chǔ)）（如圖2）。[1]

其中，用戶界面模塊包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀龋簿褪谴蠹宜吹降某隧?yè)面顯示窗口之外的其他部分；瀏覽器引擎的作用是在用戶界面和渲染引擎之間傳送指令或在客戶端本地緩存中讀寫數(shù)據(jù)等，是瀏覽器中各個(gè)部分之間相互通信的核心部分；渲染引擎是用來(lái)解析DOM文檔和CSS規(guī)則并將內(nèi)容排版到瀏覽器中顯示有樣式的界面，也有人稱之為排版引擎，我們常說(shuō)的瀏覽器內(nèi)核主要指的就是渲染引擎；網(wǎng)絡(luò)是完成網(wǎng)絡(luò)調(diào)用或資源下載的模塊，沒(méi)有網(wǎng)絡(luò)就不能上網(wǎng)使用瀏覽器了；UI后端模塊用來(lái)繪制基本的瀏覽器窗口內(nèi)控件，如輸入框、按鈕、單選按鈕等，根據(jù)瀏覽器不同繪制的視覺(jué)效果也不同，但功能都是一樣的；JS解釋器用來(lái)解釋執(zhí)行JS腳本的模塊；數(shù)據(jù)存儲(chǔ)模塊是瀏覽器在硬盤中保存cookie、localStorage等各種數(shù)據(jù)，可通過(guò)瀏覽器引擎提供的API進(jìn)行調(diào)用等。

2.主流瀏覽器內(nèi)核

一個(gè)完整的瀏覽器包含瀏覽器內(nèi)核和瀏覽器的外殼（shell）。瀏覽器最重要或者說(shuō)核心的部分是“Rendering Engine”，也就是“渲染引擎”，不過(guò)我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負(fù)責(zé)對(duì)網(wǎng)頁(yè)語(yǔ)法的解釋并渲染（顯示）網(wǎng)頁(yè)。瀏覽器內(nèi)核又可以分為兩部分：渲染引擎（Layout Engine或Rendering Engine）和JS引擎。由于JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)語(yǔ)法的解釋不盡相同，這就導(dǎo)致了不同瀏覽器渲染出的網(wǎng)頁(yè)可能有一些差異。[2]瀏覽器內(nèi)核的品種很多，我們來(lái)關(guān)注一些主流的。

（1）Trident（IE內(nèi)核）

Trident內(nèi)核代表產(chǎn)品Internet Explorer，又稱其為IE內(nèi)核。Trident（又稱為MSHTML），是微軟開發(fā)的一種排版引擎。基于Trident內(nèi)核的瀏覽器非常多，這是因?yàn)門rident內(nèi)核提供了豐富的調(diào)用接口。國(guó)內(nèi)很多的雙核瀏覽器其中之一就是Trident，美名其曰“兼容模式”。Windows10發(fā)布后，IE將其內(nèi)置瀏覽器命名為Edge（原名斯巴達(dá)），使用了新內(nèi)核Edge引擎。代表：IE、傲游、世界之窗瀏覽器、Avant、搜狗瀏覽器、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。

（2）Gecko（Firefox）

Gecko內(nèi)核的代表作品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網(wǎng)頁(yè)排版引擎，現(xiàn)在主要由Mozilla基金會(huì)進(jìn)行維護(hù)。Gecko是最流行的排版引擎之一，僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。可惜這幾年它已經(jīng)沒(méi)落了，如打開速度慢。代表：Gecko內(nèi)核的瀏覽器——Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。

（3）KHTML（Linux）

KDE開發(fā)的內(nèi)核，速度快捷，容錯(cuò)度低。這個(gè)內(nèi)核可能很多人不知道，但是后面再看下去你就明白了。代表：Konqueror。

（4）Webkit（Safari）

蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。因?yàn)槭敲撎ビ贙HTML，所以也是具有高速的特點(diǎn)，同樣遵循W3C標(biāo)準(zhǔn)。從目前看來(lái)，WebKit內(nèi)核是最有潛力而且是已經(jīng)有相當(dāng)成績(jī)的新興內(nèi)核，性能非常好，而且對(duì)W3C標(biāo)準(zhǔn)的支持很完善。代表：Safari、Symbian手機(jī)瀏覽器、Android 默認(rèn)瀏覽器。

（5）Presto（Opera）

Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動(dòng)態(tài)功能，如網(wǎng)頁(yè)或其部分可隨著DOM及Script語(yǔ)法的事件而重新排版。在2013年之后，Opera宣布加入谷歌陣營(yíng)，棄用了Presto。

（6）Blink（Chrome）

由Google和Opera Software開發(fā)的瀏覽器排版引擎，2013年4月發(fā)布，現(xiàn)在Chrome內(nèi)核是Blink。Blink其實(shí)是WebKit的分支，大部分國(guó)產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。

移動(dòng)端的瀏覽器內(nèi)核主要說(shuō)的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。目前移動(dòng)設(shè)備瀏覽器上常用的內(nèi)核有Webkit、Blink、Trident、Gecko，其中蘋果iOS平臺(tái)主要是Webkit，Android4.4之前Android系統(tǒng)瀏覽器的內(nèi)核是Webkit，Android4.4之后使用Blink，Windows Phone 8系統(tǒng)瀏覽器內(nèi)核是Trident。

目前很多國(guó)內(nèi)瀏覽器的新版本是“雙核”甚至是“多核”，其中一個(gè)內(nèi)核是Trident，然后再增加一個(gè)其他內(nèi)核。國(guó)內(nèi)的廠商一般把其他內(nèi)核叫做“高速瀏覽模式”，而Trident則是“兼容瀏覽模式”，用戶可以來(lái)回切換。

3.查看瀏覽器內(nèi)核

查看瀏覽器內(nèi)核的方法，一般分為直接查看瀏覽器版本和用第三方工具（網(wǎng)站）來(lái)查詢。例如，360瀏覽器的內(nèi)核可以通過(guò)點(diǎn)擊“幫助”——“關(guān)于360安全瀏覽器”查到（如圖3）。用第三方工具查詢只要打開瀏覽器，輸入網(wǎng)址（https：//ie.icoa.cn/或http：//liulanmi.com/labs/core.html），就可以查看瀏覽器的內(nèi)核版本了（如圖4）。觀察版本號(hào)可知，該瀏覽器的主版本號(hào)是63，子版本號(hào)是0，階段版本號(hào)是3239。

新功能，看過(guò)來(lái)

我們都知道瀏覽器是用來(lái)上網(wǎng)的，關(guān)于瀏覽器的一些基本功能，如設(shè)置主頁(yè)、收藏、刷新、查看歷史記錄、代理設(shè)置、清除緩存之類的基本功能，在這里就不做介紹了。我們主要來(lái)了解一下當(dāng)前主流瀏覽器的一些特色功能。

1.瀏覽器的網(wǎng)絡(luò)收藏夾

隨著互聯(lián)網(wǎng)，特別是移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，現(xiàn)在很多瀏覽器都具有網(wǎng)絡(luò)收藏夾的功能。無(wú)論身在何處，什么設(shè)備，只要登錄自己賬戶，就可以隨時(shí)獲取收藏夾的最新內(nèi)容。類似360瀏覽器、QQ瀏覽器等同時(shí)具有電腦瀏覽器和手機(jī)瀏覽器，只要使用同一個(gè)賬戶登錄，所有設(shè)備的收藏網(wǎng)址都能同步，帶來(lái)了極大的便利。

2.瀏覽器的手勢(shì)功能

按住鼠標(biāo)右鍵后，鼠標(biāo)在瀏覽窗口里滑出一個(gè)軌跡以使用瀏覽器里的功能，即為鼠標(biāo)手勢(shì)。現(xiàn)在很多瀏覽器都具有鼠標(biāo)手勢(shì)功能，且不同瀏覽器的鼠標(biāo)手勢(shì)都有些類似。如圖5所示分別為360瀏覽器和QQ瀏覽器的部分鼠標(biāo)手勢(shì)設(shè)置。

3.瀏覽器的皮膚

傳統(tǒng)瀏覽器的界面是一成不變的，用久了會(huì)感覺(jué)比較單調(diào)，目前瀏覽器也推出了瀏覽器皮膚設(shè)置的功能，就像手機(jī)屏保一樣，可以為瀏覽器設(shè)置不同類型的主題、壁紙作為皮膚，使其看起來(lái)更加賞心悅目。

4.跨屏瀏覽功能

跨屏瀏覽，顧名思義就是可以在多個(gè)屏幕之間切換瀏覽。當(dāng)你用電腦上網(wǎng)的時(shí)候發(fā)現(xiàn)不錯(cuò)的網(wǎng)站，想要分享到微信朋友圈或者轉(zhuǎn)發(fā)給好友，可以先將網(wǎng)址生成二維碼，然后再用手機(jī)去掃碼打開；抑或你想把電腦瀏覽器網(wǎng)站上的圖片傳到手機(jī)里，可以在手機(jī)上安裝手機(jī)版瀏覽器，就可以實(shí)現(xiàn)了。

5.瀏覽器的擴(kuò)展功能

瀏覽器擴(kuò)展（又稱為插件或應(yīng)用）是指非官方出品的瀏覽器輔助程序，主流瀏覽器都具有擴(kuò)展功能，是由第三方瀏覽器開發(fā)者自主開發(fā)，經(jīng)審核后發(fā)布的。不同瀏覽器擴(kuò)展的名稱及功能也不相同。安裝和使用瀏覽器擴(kuò)展功能的具體介紹，我們將在下篇詳細(xì)介紹。

6.全球最小的瀏覽器——一點(diǎn)瀏覽器

一點(diǎn)瀏覽器（http：//www.yidianliulan.com/）的完整安裝包僅有約0.6M，相當(dāng)于一張圖片的大小。其只保留了瀏覽器的核心功能，摒棄復(fù)雜而無(wú)用的功能設(shè)計(jì)，運(yùn)行時(shí)相對(duì)占用的系統(tǒng)內(nèi)存很少，由此帶來(lái)的是運(yùn)行更流暢

要排版，用語(yǔ)言

很多人可能不知道，瀏覽器的功能不是“瀏覽”網(wǎng)站，而是解釋執(zhí)行HTML代碼。我們使用瀏覽器打開各式各樣的網(wǎng)站，看到的是五彩繽紛、絢麗多姿的頁(yè)面。可事實(shí)上，每一個(gè)網(wǎng)頁(yè)的本質(zhì)其實(shí)都是一大串代碼組成的，正是因?yàn)闉g覽器我們才能夠看到這些精彩的頁(yè)面。接下來(lái)，我們就來(lái)認(rèn)識(shí)一下HTML代碼，以及它是如何實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)排版的。

1.HTML語(yǔ)言介紹

HTML是超文本標(biāo)記語(yǔ)言（HyperText Markup Language），其中超文本是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂(lè)、程序等非文字元素。網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)，可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)。

HTML語(yǔ)言很大的特點(diǎn)是其代碼有不同類型的標(biāo)記符，且很多是成對(duì)出現(xiàn)的。例如標(biāo)記符，說(shuō)明該文件是用HTML語(yǔ)言來(lái)描述的，表示文件的開頭，而則表示該文件的結(jié)尾，這兩個(gè)標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁(yè)面的標(biāo)題、序言、說(shuō)明等內(nèi)容。網(wǎng)頁(yè)中顯示的實(shí)際內(nèi)容均包含在這兩個(gè)正文標(biāo)記符之間。還有