倪俊杰

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

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

小窗口，大世界

瀏覽器的發(fā)展史，可以說(shuō)是眾多瀏覽器豪門(mén)的爭(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ā)起開(kāi)發(fā)的。由此，便開(kāi)啟了瀏覽器的爭(zhēng)霸史了。

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

這時(shí)，科技巨頭微軟坐不住了，急忙從其他公司購(gòu)買(mǎi)了瀏覽器技術(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)買(mǎi)了操作系統(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)，并開(kāi)放Netscape瀏覽器的源代碼，成立了非正式組織Mozilla Application Suite?？上У氖?，Netscape還是在1998年底被收購(gòu)了。直到2002年，又派生出了Phoenix（后改名Firebird，最后又改為Firefox）瀏覽器，也總算保留了“豪門(mén)血脈”，在市場(chǎng)上還占有一席之地。

在此期間，還出現(xiàn)了其他瀏覽器。比如Opera，是挪威Opera Software ASA公司旗下的一個(gè)靈巧的瀏覽器，發(fā)布于1996年。它在手持電腦上十分流行，不過(guò)它在個(gè)人電腦網(wǎng)絡(luò)瀏覽器市場(chǎng)上的占有率較小。2003年，蘋(píng)果公司在蘋(píng)果手機(jī)上開(kāi)發(fā)了Safari瀏覽器，并利用自己得天獨(dú)厚的手機(jī)市場(chǎng)份額使Safari瀏覽器迅速成為世界主流瀏覽器。Safari是現(xiàn)在蘋(píng)果默認(rèn)的瀏覽器。Lynx瀏覽器是Linux市場(chǎng)上十分流行的瀏覽器。它是全文字模式的瀏覽器，視覺(jué)上并不太好。還有一些有著進(jìn)階功能的同類(lèi)型瀏覽器，如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í)，開(kāi)始頻繁更新IE。2011年IE9發(fā)布，2012年IE10發(fā)布，2013年IE11發(fā)布，最后IE的代碼實(shí)在適應(yīng)不了新的要求的WEB技術(shù)，就重新開(kāi)發(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（用戶(hù)界面）、Browser engine（瀏覽器引擎）、Rendering engine（渲染引擎）、Networking（網(wǎng)絡(luò)）、JavaScript Interpreter（JS解釋器）、UI Backend（UI后端）、Date Persistence（數(shù)據(jù)持久化存儲(chǔ)）（如圖2）。[1]

其中，用戶(hù)界面模塊包括地址欄、后退/前進(jìn)按鈕、書(shū)簽?zāi)夸浀?，也就是大家所看到的除了?yè)面顯示窗口之外的其他部分；瀏覽器引擎的作用是在用戶(hù)界面和渲染引擎之間傳送指令或在客戶(hù)端本地緩存中讀寫(xiě)數(shù)據(jù)等，是瀏覽器中各個(gè)部分之間相互通信的核心部分；渲染引擎是用來(lái)解析DOM文檔和CSS規(guī)則并將內(nèi)容排版到瀏覽器中顯示有樣式的界面，也有人稱(chēng)之為排版引擎，我們常說(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ǔ)模塊是瀏覽器在硬盤(pán)中保存cookie、localStorage等各種數(shù)據(jù)，可通過(guò)瀏覽器引擎提供的API進(jìn)行調(diào)用等。

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

一個(gè)完整的瀏覽器包含瀏覽器內(nèi)核和瀏覽器的外殼（shell）。瀏覽器最重要或者說(shuō)核心的部分是“Rendering Engine”，也就是“渲染引擎”，不過(guò)我們一般習(xí)慣將之稱(chēng)為“瀏覽器內(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，又稱(chēng)其為IE內(nèi)核。Trident（又稱(chēng)為MSHTML），是微軟開(kāi)發(fā)的一種排版引擎?；赥rident內(nèi)核的瀏覽器非常多，這是因?yàn)門(mé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是一套開(kāi)放源代碼的、以C++編寫(xiě)的網(wǎng)頁(yè)排版引擎，現(xiàn)在主要由Mozilla基金會(huì)進(jìn)行維護(hù)。Gecko是最流行的排版引擎之一，僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9?？上н@幾年它已經(jīng)沒(méi)落了，如打開(kāi)速度慢。代表：Gecko內(nèi)核的瀏覽器——Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。

（3）KHTML（Linux）

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

（4）Webkit（Safari）

蘋(píng)果公司自己的內(nèi)核，也是蘋(píng)果的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開(kāi)發(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開(kāi)發(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，其中蘋(píng)果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則是“兼容瀏覽模式”，用戶(hù)可以來(lái)回切換。

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

查看瀏覽器內(nèi)核的方法，一般分為直接查看瀏覽器版本和用第三方工具（網(wǎng)站）來(lái)查詢(xún)。例如，360瀏覽器的內(nèi)核可以通過(guò)點(diǎn)擊“幫助”——“關(guān)于360安全瀏覽器”查到（如圖3）。用第三方工具查詢(xún)只要打開(kāi)瀏覽器，輸入網(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)的基本功能，在這里就不做介紹了。我們主要來(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è)備，只要登錄自己賬戶(hù)，就可以隨時(shí)獲取收藏夾的最新內(nèi)容。類(lèi)似360瀏覽器、QQ瀏覽器等同時(shí)具有電腦瀏覽器和手機(jī)瀏覽器，只要使用同一個(gè)賬戶(hù)登錄，所有設(shè)備的收藏網(wǎng)址都能同步，帶來(lái)了極大的便利。

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

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

3.瀏覽器的皮膚

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

4.跨屏瀏覽功能

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

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

瀏覽器擴(kuò)展（又稱(chēng)為插件或應(yīng)用）是指非官方出品的瀏覽器輔助程序，主流瀏覽器都具有擴(kuò)展功能，是由第三方瀏覽器開(kāi)發(fā)者自主開(kāi)發(fā)，經(jīng)審核后發(fā)布的。不同瀏覽器擴(kuò)展的名稱(chēng)及功能也不相同。安裝和使用瀏覽器擴(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代碼。我們使用瀏覽器打開(kāi)各式各樣的網(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)是其代碼有不同類(lèi)型的標(biāo)記符，且很多是成對(duì)出現(xiàn)的。例如標(biāo)記符，說(shuō)明該文件是用HTML語(yǔ)言來(lái)描述的，表示文件的開(kāi)頭，而則表示該文件的結(jié)尾，這兩個(gè)標(biāo)記符分別表示頭部信息的開(kāi)始和結(jié)尾。頭部中包含的標(biāo)記是頁(yè)面的標(biāo)題、序言、說(shuō)明等內(nèi)容。網(wǎng)頁(yè)中顯示的實(shí)際內(nèi)容均包含在這兩個(gè)正文標(biāo)記符之間。還有