從今天起，我們重新認識瀏覽器（上）

倪俊杰

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

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

小窗口，大世界

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

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

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

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

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

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

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

有人的地方就有江湖，不管如何，瀏覽器之間的斗爭永遠不會停歇。

瀏覽器，不簡單

既然要認識瀏覽器，就肯定要知道瀏覽器是由哪些部件組成的。

1.瀏覽器的組成

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

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

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

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

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

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

（2）Gecko（Firefox）

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

（3）KHTML（Linux）

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

（4）Webkit（Safari）

蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。因為是脫胎于KHTML，所以也是具有高速的特點，同樣遵循W3C標準。從目前看來，WebKit內(nèi)核是最有潛力而且是已經(jīng)有相當成績的新興內(nèi)核，性能非常好，而且對W3C標準的支持很完善。代表：Safari、Symbian手機瀏覽器、Android 默認瀏覽器。

（5）Presto（Opera）

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

（6）Blink（Chrome）

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

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

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

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

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

新功能，看過來

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

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

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

2.瀏覽器的手勢功能

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

3.瀏覽器的皮膚

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

4.跨屏瀏覽功能

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

5.瀏覽器的擴展功能

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

6.全球最小的瀏覽器——一點瀏覽器

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

要排版，用語言

很多人可能不知道，瀏覽器的功能不是“瀏覽”網(wǎng)站，而是解釋執(zhí)行HTML代碼。我們使用瀏覽器打開各式各樣的網(wǎng)站，看到的是五彩繽紛、絢麗多姿的頁面?？墒聦嵣希恳粋€網(wǎng)頁的本質(zhì)其實都是一大串代碼組成的，正是因為瀏覽器我們才能夠看到這些精彩的頁面。接下來，我們就來認識一下HTML代碼，以及它是如何實現(xiàn)對網(wǎng)頁排版的。

1.HTML語言介紹

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

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