瀏覽器是前端必須使用的工具之一,可以查看效果,可以調試代碼,甚至可以直接編寫代碼。本文主要探尋瀏覽器的歷史,瀏覽器內核的機制和對頁面的兼容影響,瀏覽器現今的市場份額及未來趨勢。此次主要了解PC端。
********瀏覽器歷史********
世界上第一個瀏覽器WorldWideWeb(后改為Nexus)由Tim Berners-Lee創建於歐洲核子物理實驗室。同時他還寫了第一個網頁服務器httpd。世界上第一條http: //info. cern. ch/於1991年8月6日上網。
圖1.Web 之父 Tim Berners-Lee
1993年,伊利諾伊大學厄巴納-香檳分校的NCSA組織發表NCSA Mosaic,簡稱Mosaic。是互聯網歷史上第一個獲普遍使用和能夠顯示圖片的網頁瀏覽器。並於1997年1月7日正式終止開發和支持。
圖2全世界第一條網址現在打開情況
瀏覽器的發展史並不久遠,只有短短的24年,但是卻不斷更迭。
表1.主流的瀏覽器發展歷史
發表時間 |
名稱 |
發表人/組織 |
地點 |
現狀 |
1991年 |
www(nexus) |
Tim Berners-Lee |
瑞士CERN |
消失 |
1993年 |
Mosaic |
伊利諾大學的NCSA組織 |
美國 |
被收購 |
1994年 |
Netscape |
Marc Andreessen |
美國 |
消失 |
1996年 |
IE |
微軟 |
美國 |
轉戰Microsoft Edge |
1996年 |
Opera |
Telenor公司 |
挪威 |
現存 |
2003年 |
safari |
蘋果公司 |
美國 |
現存 |
2004年 |
firefox |
Mozilla組織 |
美國 |
現存 |
2008 |
chrome |
谷歌公司 |
美國 |
現存 |
國內的瀏覽器廠商都是用國外的瀏覽器內核,所以這里不重點介紹了。筆者對主流瀏覽器的性能、兼容軟件、對html、css、js的支持(其中“結果時間”越短越佳)。選取了瀏覽器行業主流chrome,firefox,safari,IE,opera,以及國外的Avant,vivaldi,國內較為主流的QQ和UC瀏覽器。
選擇的瀏覽器中包含了主流的blink,IE,webkit,moz四種瀏覽器內核。其中avant可以使用三種內核模式,此次測試選用了IE模式。QQ瀏覽器有兩種內核模式,此次選用了webkit模式。表2是測試結果。
表2.主流的瀏覽器測試結果
瀏覽器名稱 |
結果時間 |
HTML5支持 |
兼容軟件 |
HTML等性能 |
chrome |
154.1ms |
521 |
100 |
4974 |
|
144.8ms |
525 |
100 |
4776 |
vivaldi |
157.2ms |
511 |
100 |
5476 |
opera |
163.9ms |
520 |
100 |
5060 |
firefox |
155.2ms |
468 |
99 |
5310 |
IE |
2317.9ms |
33 |
15 |
283 |
Avant Browser |
2201.1ms |
32 |
15 |
275 |
safari |
152.7ms |
209 |
100 |
2715 |
UC |
148.4ms |
526 |
97 |
5104 |
下圖是瀏覽器的性能測試的結果,可以看出QQ、UC、chrome、firefox等瀏覽器都保持在160ms以內。IE、Avant瀏覽器的時間都在2000以上。這個測試時間越少,代表瀏覽器性能越高。由此可見,國內的QQ和UC的性能相對較高,甚至略微高於主流的chrome、firefox、safari。
圖3.瀏覽器綜合速度比較
下圖是瀏覽器對html5的支持測試結果,分數越高則支持越佳。測試結果顯示IE和Avant依舊是表現欠佳,令人驚詫的是safari竟然還沒有主流瀏覽器的一般分數,火狐的也稍微低於主流瀏覽器。UC瀏覽器在此次測試中奪得頭魁。
圖4.瀏覽器對html5支持比較
下圖是瀏覽器對軟件的支持測試,分數越高者越佳,使用了Acid3測試。Acid3是一份網頁瀏覽器及設計軟件之標准相容性的測試網頁,這是目前Web標准基准測試中最嚴格的一個,對DOM和JavaScript有着嚴格的約束。瀏覽器開啟此測試網頁后,頁面會不斷加載功能、直接給予分數,滿分為100分。
此次測試中chrome、QQ、vivaldi、opera、safari都拿到滿分,火狐99分,UC拿到97分。而IE和Avant則並不理想。
圖5.瀏覽器對軟件支持比較
下圖是采用Peacekeeper測試的結果。 Peacekeeper測試領域包含 HTML5、CSS3、Javascript、DOM 性能等,測試結果為打分制,得分越高則代表瀏覽器的性能越好。此次測試vivaldi表現十分突出,火狐奪得第二。IE和avant的表現依舊不如人意,此次safari的表現令人詫異,因為分數只有主流瀏覽器的一般分數。
圖6.瀏覽器綜合性能比較
綜合表格的結果,將其對應的內核進行比較發現webkit無論是性能、對html5的支持以及軟件的支持都是內核中最佳的,而在綜合測試中blink的表現令人驚喜。
********瀏覽器內核********
瀏覽器內核也稱為渲染引擎,是瀏覽器最重要的部分。內核負責對網頁語法的解釋。目前存在的主要的內核有Trident、Gecko、Webkit、blink四個。表3介紹了主流的瀏覽器內核及開發公司、目前使用這些內核的瀏覽器。
表3.主流的瀏覽器內核介紹
內核名稱 |
開發公司 |
使用瀏覽器(過去和現在) |
Trident (IE內核) |
微軟公司 |
IE,360瀏覽器,獵豹瀏覽器,傲游瀏覽器,2345瀏覽器,百度瀏覽器,世界之窗瀏覽器,瑞星瀏覽器,淘寶瀏覽器,騰訊TT瀏覽器,海豚瀏覽器等 |
Gecko (Firefox內核) |
Mozilla組織 |
火狐瀏覽器 |
Webkit (Safari內核) |
蘋果公司 |
safari,360極速瀏覽器,chrome高速模式,搜狗高速瀏覽器;手機瀏覽器:傲游瀏覽器3,safari,symbian手機瀏覽器,安卓默認瀏覽器 |
blink |
由Google和Opera Software聯合開發 |
vivaldi,Chrome(28及往后版本)、Opera(15及往后版本),Yandex |
值得一提的是2013年以前Trident、Gecko、Presto、Webkit才是主流的瀏覽器內核,Presto Opera Software公司開始的,用於Opera的渲染引擎。微軟的最新瀏覽器microsoft Edge使用了Edge HTML內核,Edge html原是Triant的分支,加之microsoft Edge的戰績不好看至今還在一直下滑,此處不做過多的介紹。
目前主流的幾款瀏覽器內核的區別是什么呢?
一、Trident內核
Trident內核,又稱MSHTML,微軟內核。是微軟窗口操作系統windows搭載的網頁瀏覽器,也是IE的排版引擎。IE內核相對其他內核是最開放的,接口設計相對最為成熟,對外部程序支持最好,這也是IE外殼的瀏覽器最多的原因之一。IE背靠windows大樹一度占據瀏覽器市場的絕對優勢,微軟也很長時間沒有更新trident內核,導致Trident內核幾乎與W3C標准脫節,也是的大量的bug等安全性問題涌現,給了后起之秀很多機會。
二、Gecko內核
Gecko,也稱壁虎,火狐內核。Gecko核心設計的相對成熟,在無法獲取源碼的情況下,開放程度僅次於IE。由於其本身Open Source。實際上是目前開發程度最好的瀏覽器。Firefox的擴展能夠給瀏覽者帶來完全不同的瀏覽體驗。
三、webkit內核
WebKit內核,蘋果公司自己的內核,也是蘋果的Safari瀏覽器使用的內核。
四、blink內核
Blink是一個由Google和Opera Software開發的瀏覽器排版引擎,Google計划將這個渲染引擎作為Chromium計划的一部分,並且在2013年4月的時候公布了這一消息。在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex瀏覽器中使用。
五、Presto內核
Presto是一個由Opera Software開發的瀏覽器排版引擎,供Opera 7.0及以上使用。該款引擎的特點就是渲染速度的優化達到了極致,也是目前公認網頁瀏覽速度最快的瀏覽器內核,然而代價是犧牲了網頁的兼容性。
********瀏覽器市場份額和趨勢********
來自Net Market Share的數據,2014年的世界瀏覽器份額如下圖7所示:
圖7.2014年世界瀏覽器份額
由圖可見IE占據了58.3%的份額,而后依次是chrome、firefox、safira、opera。再將時間拉到2015年,去年世界瀏覽器的份額如下圖所示:
圖8.2015年世界瀏覽器份額
由圖可見IE雖然依舊是第一,但是份額較2014年減少了約5%,safari和firefox也有小幅度的減少,而chrome有着十分突出的增長,較2014年增長了1/2。
再將時間往前至上一個季度,世界瀏覽器的份額如下圖所示:
圖9.上個季度世界瀏覽器份額
由圖可見,上個季度IE的份額逐日走低,減少至50%,而chrome依舊勢頭正好,占據了31.62%,而firefox、safira、opera基本沒有明顯的變化。
在過去的24年瀏覽器發展歷史中,網景公司有過曇花一現的輝煌,而后IE依靠自己的系統捆綁式長期占據了市場的絕對的份額,opera雖然有很大的革新卻一直不溫不火,火狐和chrome的突起讓IE開始關注自己的瀏覽器問題。opera棄掉自己的Presto內核選擇webkit,而今google和opera一起創建blink內核也嶄露頭角,瀏覽器未來的方向必是多元化的。在前端方面,我想我們可以開始關注blink內核了,blink內核在對頁面的渲染速度超過其它內核,市場永遠只選擇最有利於消費者的產品。
---------我是結束線--------