IE 10 大戰 4大瀏覽器實測，支援 HTML 5、效能並不差

近期大家都把焦點放在微軟新推出的作業系統Windows 8和Modern UI身上，不論Modern UI到底適不適合套用在桌上型電腦，或是大家拼命想要把「開始」選單給變回來，不少人還忽略了一點，那就是Internet Explorer 10也跟著新的作業系統推出了。本文為 PCADV 電腦王雜誌 102 期 2013 年 1 月號的特別報導：IE10大戰瀏覽器群雄，測試的瀏覽器版本為 2012 年 12 月當時的最新版本，IE10 則為 IE10 Preview 版本。微軟正式推出Internet Explorer 9後約1個月，Internet Explorer 10預覽版隨即被放出，微軟立刻在Internet Explorer Test Drive網站上釋出預覽版。相較於之前可以說是「牛步」的更新速度，這次可說是快多了，從前年3月14日發佈Internet Explorer 9 RTM，到去年8月中旬隨著Windows 8的RTM推出，甚至不到1年半就推出新版，突顯微軟在網路瀏覽器方面投入的心力。隨著微軟自古以來的「慣例」，比較新的程式只能在最新的Windows中享受，當然Internet Explorer 10也不例外。在微軟今年所推出的作業程式平台中，不論是Windows 8、Windows RT、Windows Phone 8均內建Internet Explorer 10；至於上一代的Windows 7，在去年的11月13號才剛剛釋出預覽版，並且在上週推出正式版本，大心的是微軟推出了32位元和64位元的版本，甚至連伺服器平台Windows Server 2008 R2 SP1也有64位元版！。▲Internet Explorer 10日前已推出Windows NT 6.1（包含Windows 7和Windows Server 2008 R2）的正式版本，版號為 10.0.9200.16521。安裝時會將原先的Internet Explorer 9取代掉，使用者安裝前應注意。不一樣的排版引擎，網頁呈現出來的效果與效能均不同。目前大家愛用的Google Chrome和Apple Safari使用Webkit（Chrome的JavaScript引擎改用V8）、Mozilla Firefox使用Gecko、Opera為Presto；至於本次的主角Internet Explorer 10使用Trident排版引擎，支援更多CSS3特效。Internet Explorer 10終於在Acid3網頁標準相容性測試中獲得滿分的榮耀，在此之前，Acid3早已被Chrome、Safari、Firefox、Opera所征服。等等，Internet Explorer 9不是也在Acid3中出現100分嗎？如果讀者使用Internet Explorer 9進入Acid3測試網址（http://acid3.acidtests.org），分數的確是出現100分沒錯，但是在Acid3字樣缺少陰影效果，直到Internet Explorer 10才完全正確。▲左方圖片是使用IE9測試的結果，右方是應該呈現的參考圖像，可以發現IE9雖然獲得100分，但Acid3下方缺乏陰影。Internet Explorer 10為了迎合Windows 8的觸控功能，支援多點的觸控輸入。雖然說目前並未有什麼大應用，但若未來越來越多網頁版遊戲出現，這項功能就越顯得重要。目前多點觸控在各種不同瀏覽器下的支援度不同，在Safari與Chrome裡可使用touches事件參數屬性取得多點資料，而Internet Explorer 10則是改採自身的MS開頭事件，如MSPointerDown、MSGestureStart……等，比起touch事件更好掌握使用者的輸入。當然，這又是Internet Explorer 10的專門指令，不過在W3C正式把Touch Events確立之前，也只好這麼辦了。▲IE10支援多點觸控輸入，因此瀏覽器可以根據觸控位置變更畫面。Safari與Chrome目前也支援觸控事件，但是多點觸控處理較為麻煩些。▲W3C定義的觸碰事件目前還在Editor’s Draft階段（第二版），功能可以映射到MSPointer事件。但相較於目前觸控裝置橫行蔓延的速度，W3C的決策顯得十分緩慢。這次與Windows 8一同上市的Windows RT，因為採用ARM處理器的緣故，並無法相容以往x86應用程式，需要重新建立起一套RT版的應用程式生態。以撰寫本文的時間點來說，在市集裡並沒有其它廠商的網頁瀏覽器可供下載。筆者在拜訪台灣微軟應用開發技術經理上官林傑時，得到的回應為微軟並未限制其它廠商在Windows RT上開發網頁瀏覽器，歡迎大家使用。但在Mozilla和Google方面的回應卻不是如此，Mozilla發言人Asa Dotzler曾說過：「首先，微軟在Windows ARM（指Windows RT）上的傳統桌面模式有個瀏覽器，他們（指微軟）並不允許我們使用相同的功能並執行我們的瀏覽器。第二，微軟有另外一個在Metro模式（Modern UI）下的瀏覽器，並可以使用豐富的API，卻不允許第三方廠商使用。因此我們不會在傳統桌面下推出瀏覽器，Metro介面下也不會。」Google在之後也確認了此事，並希望微軟能夠提供更全面的功能。在Modern UI下，Internet Explorer 10開啟時沒有傳統視窗的邊框，希望大家能夠「沉浸」在網頁內容中，在螢幕上去除不必要的額外資訊。特別是希望使用者忘了目前正在逛網頁，能夠提供和應用程式相同的體驗，如Office 365和之前的Google Docs即為一例。不過微軟似乎忘了一點，一般的瀏覽器也能夠按下F11，進行全螢幕瀏覽。筆者從第一次接觸網頁，總想著為何瀏覽器只有上一頁，卻沒有辦法預知下一頁呢？特別是在論壇類型的網站上，要去按那個小小的「數字」或是「下一頁」，實在是令人惱怒；觸控裝置上的體驗更糟，手指本來就無法進行精密的點擊動作，若網頁並未針對觸控裝置進行改版，每每總讓人氣到想把螢幕給戳爆。Internet Explorer 10可以依據網頁中的超連結位址，判斷出下一頁的位址在哪裡。在Modern UI中，以手指向左滑動即可進入下一頁。可惜這是Modern UI下才有的福利，傳統桌面的使用者沒有這個福氣享受。▲在Modern UI介面下，使用手指在螢幕上往左滑，Internet Explorer 10便可自動預測下一頁，並將畫面顯示在螢幕上。▲如果無法使用快速翻頁功能，請切換到傳統桌面下的Internet Explorer 10，檢查是否有將「使用快速翻頁」勾選起來。這一點蠻令人訝異，Internet Explorer 10將Do Not Track（請勿追蹤位置）功能預設為開啟狀態，Chrome和Firefox僅將此功能放入，並未預設開啟。此舉引來一些網路內容供應商的不滿，Yahoo更明確表示此功能的開啟與否應交由使用者決定，不應交由瀏覽器開發商決定，因此他們將會忽視由Internet Explorer 10所傳來的DNT要求。以筆者觀點來看，Do Not Track僅是提供網路業者一個自律的選項，由使用者所使用的網頁瀏覽器告訴伺服器不要追蹤位置，在伺服器端並未有強制約束力，但卻是網路業者表明自己是否尊重使用者的重要依據。Internet Explorer 9之中，微軟重新改寫了內部的JavaScript引擎，稱之為Chakra。微軟一直圍繞著2大主軸設計Chakra，直到Internet Explorer 10也不例外：在Internet Explorer 10則是將Chakra升級至64位元處理，也加入ARM處理器的支援，此外也包含了JIT即時編譯器的效能改進、更好的垃圾回收功能。浮點運算部分，比起上代Internet Explorer 9快了50％。▲在同樣的硬體環境下，Internet Explorer 10的確在JavaScript引擎上效率有所提升，不論是正式版的Internet Explorer 10，或是目前還在pre-release階段的Windows NT 6.1版都是如此。WebGL使用OpenGL ES 2.0為基礎，在瀏覽器網頁上即時繪製3D圖像，不用再依靠其它外掛程式執行。規格標準都還在發展中，但目前已受Chrome、Firefox、Opera、Safari支援，某些手機內的瀏覽器也可支援。微軟也對目前不支援WebGL作出解釋，認為WebGL尚有些安全問題須解決，其中包含對硬體的DOS攻擊，以及跨網域影像竊取（cross-domain image theft）的問題。且WebGL尚未正式發展成新標準，因此目前不打算加入WebGL的支援。▲HTML5 Test網站所製作的分數曲線圖，可以看到其它4款瀏覽器的斜率較為固定，而Internet Explorer 10的斜率越來越大，或許11代推出時會有黃金交叉出現。光說不練偽君子，邊說邊練電腦王。正當Internet Explorer 10推出之際，當然也要和其它市面上的瀏覽器進行比較，這次要跑跑看網頁排版與運算效能。由於目前Internet Explorer 10只支援Windows 8、RT、Phone 8平台，因此測試平台選用Windows 8 Enterprise環境。CPU選擇Intel Core i7-2600K 3.4GHz、記憶體為DDR3 1600GHz 2GB x2、顯示卡使用NVIDIA GeForce GTX 560Ti。去年12月17日，全球資訊網協會（World Wide Web Consortium，簡稱W3C），在當天發出新聞稿，指出W3C已完成HTML5和Canvas 2D的功能制定工作，正式進入互通性和效能測試。HTML5雖尚未正式成為W3C的正式標準，但代表著不再會有任何功能的刪減，各家瀏覽器可以開始為HTML5進行最佳化和相容性測試。當天同時公布HTML5.1和Canvas 2D, Level2的第一份草案，W3C最終希望HTML5能在2014年底正式推出，並成為開發人員預設使用的網頁語言。▲HTML5終於把功能定義弄完了，明年下半年有希望正式推出。程式中需要用到的變數或是一些運算元，開始寫程式時就必須宣告，以便執行時配置記憶體空間，直到程式終止為止。如果運算元的資料相當龐大，或是希望能夠節省記憶體使用率，在C++中有著new運算子存在，程式執行到這一階段才開始配置記憶體；使用過後可用delete釋放記憶體空間。在Java中也可動態配置記憶體空間，但卻不用去釋放它。Java使用一個稱為垃圾收集的處理方式，在適當時機（閒置、記憶體不夠用……）去檢查目前有哪些物件沒有被參照到，自動將這些物件刪去，騰出記憶體空間。IE10 for Windows 7 登場，體驗新世代 IE 的進化瀏覽器大戰：究竟是瀏覽器的戰爭、還是市調機構的競爭？巧合？IE 瀏覽器市佔率越低，美國謀殺率就越低IE10 的逆襲！研究報告指出 IE10 速度比 Chrome 20 快上 8%5大瀏覽器垃圾暫存快取清除工具，一鍵清除檔案不外洩！StatCounter 說 Chrome 使用率占整體 1/3 ，Net Applications 不以為然（後面還有：各家瀏覽器介紹）Chrome是元素「鉻」的英文名稱，Google使用它來做為自家的瀏覽器名稱。Google Chrome是目前市面上瀏覽器版本號更新最快的，許多新功能也是第一個加入的，對於隨時隨地想要迎接新技術的使用者來說是個必裝的瀏覽器。Chrome好玩的地方在網址列打入chrome://flags之後，會出現許多進階或是實驗性的功能調整。但可惜的是，從推出至今還無法限制硬碟快取大小以及指定快取資料夾功能，雖說可在捷徑圖示中加入參數作限制，但對一般人來說還是麻煩了點。 ▲Yahoo！奇摩首頁排版情形。▲Chrome的CSS3 Test進入6字頭，跟其它家還在5字頭徘徊來得好。▲HTML5 Benchmark為8681分，Total Lag是0。▲HTML5 Test得到448分，額外的Bonus主要經由視訊和音訊格式支援取得。（後面還有更多瀏覽器介紹）Mozilla是歷史上第一個有能力挑戰Internet Explorer市佔率的瀏覽器，很可惜最後還是失敗了。不過Firefox依靠著開源社群以及多年來持續開發的外掛，還是擁有一批死忠的用戶在支持著它。Firefox最近也即將登陸手機平台，不過不是以網頁瀏覽器的身分，而是直接以作業系統的方式進攻。Firefox OS的程式完全以HTML5或是CSS和JavaScript等網頁語言為主，就看看能不能在市場上投下一顆震撼彈。 ▲Yahoo！奇摩首頁排版情形。▲Firefox的CSS3 Test獲得55％，是中段班的程度。▲HTML5 Benchmark超過10000分，硬體加速效果明顯。▲HTML5 Test也是中段班的程度，385分外加10分Bonus。（後面還有更多瀏覽器介紹）Opera較為人所知，主要是手機平台的Opera Mini包含了一個相當有用的資料壓縮功能，能夠將網頁資料經由Opera伺服器壓縮，減少傳輸到手機上的資料。這在手機效能不足、傳輸頻寬受限、吃到飽方案貴死人的時空背景下，大大提升了Opera瀏覽器的知名度。Opera也是除了Internet Explorer之外，唯一提供64位元瀏覽器的公司；之前Firefox也有提供64位元版，但去年開始計畫就被砍掉了。本次測試Opera使用32位元版，如果讀者想找尋64位元版本，請記得以Opera 64bit搜尋。 ▲Yahoo！奇摩首頁排版情形。▲Opera CSS3 Test獲得58％，是本次5家廠商中的第二名。▲HTML5 Benchmark為7771分，也是不錯的表現。▲HTML5 Test為404分＋9分Bonus，僅次於Chrome之後。（後面還有更多瀏覽器介紹）演而優則導，Safari則是在Mac上取得不錯的成績，才接著推出Windows版。但Mac上許多特點都沒有移植過來，像是對字型的渲染方式，無論怎麼調整，就是沒有辦法像Mac上的中文字這麼清晰、美麗。Safari的效能也比較差，不若Windows版其它的瀏覽器。且在去年的7月27日起，已不再為Windows版進行開發，目前網路上所能找尋到的版本為5.1.7版。如果讀者不是重度Mac使用者，筆者並不建議使用Safari。 ▲Yahoo！奇摩首頁排版情形。▲Safari CSS3 Test只有51％，為5家最低分。▲不知為何，HTML5 Benchmark在Safari無法正確執行。▲HTML5 Test只有278＋2分，實在是慘兮兮。（後面還有更多瀏覽器介紹）在Windows 7 64位元中，Internet Explorer在程式集中總有2個選項，1個是x86版，另1個為x64版，在絕大多數的情況下預設都是使用x86版本，因為x64版與許多外掛不相容，網頁顯示常常都是東空一塊、西空一塊，比狗啃還慘。作業系統進化到Windows 8之後，情況有了些許改變，64位元作業程式只會包含64位元的Internet Explorer；縱使Program Files和Program Files（x86）中各有1份Internet Explorer也是如此，因此此次測試使用64位元版本。 ▲Yahoo！奇摩首頁排版情形。▲Internet Explorer CSS3 Test有54％，排名倒數第二。▲HTML5 Benchmark分數與Firefox不相上下，為10449分。▲HTML5 Test的分數不太好看，只有320分＋額外的6分。（後面還有：Chrome贏了面子、IE贏了裡子）Chrome更新速度相當快，讓它坐穩效能和相容性之王的寶座，但多分頁時記憶體吃得很兇，只有心不在Windows上的Safari能夠與它比擬。Internet Explorer 10已不再是那個跛腳雞，就前幾頁所進行的測試來說，雖比不上Chrome的分數高，但依靠硬體加速，一樣可以有順暢的瀏覽速度。甚至可以媲美Firefox的效能表現。對於微軟來說，Internet Explorer 10的確是個代表作，相較於前幾代慘不忍睹的相容性，的確是改變很多，已不再是「IE的功能就是用來下載其它的瀏覽器」，相信已升級到Windows 8的使用者能夠認同筆者的說法。在我們的測試中，Chrome、Firefox、Internet Explorer這幾款網頁瀏覽器的效能都相當不錯，足以在日常生活中使用。至於Opera則是要加加油，除了頗受好評的行動版Opera Mini之外，桌上型瀏覽器也內建有壓縮功能，在國外漫遊可是相當好用的功能。至於Safari嘛……在Windows平台下就當它駕鶴西歸了。大概是Internet Explorer 10需要一些DirectX 11支援的緣故，除了目前Windows 8內建的是正式版之外，Windows 7的Internet Explorer 10目前還是在測試中，但有相當大的機會推出，DirectX 11的部分功能也會跟隨Internet Explorer 10測試版裝入Windows 7中。在Windows 8平台上，筆者認為Internet Explorer 10和Google Chrome兩者不相上下。遇到某些網站顯示怪異，便可使用另一家網頁瀏覽器顯示。至於Windows 8之前的版本，Chrome還是較為優秀的選擇。相信各位讀者在前幾頁，都有看到Yahoo！奇摩首頁的顯示狀況，各家瀏覽器的排版皆不相同，或多或少都有些相異性存在。各個瀏覽器各自的排版引擎和版本不同，導致最終呈現效果不同，如果網頁設計師比較沒有時間，一一檢查各個瀏覽器的相容性問題，可能造成某瀏覽器開啟正常，使用另一個瀏覽器排版完全跳掉的情事發生。在這裡還是建議讀者平時多燒香，多裝幾個瀏覽器備用。▲CSS3 Test由Chrome拔得頭籌，IE10則為倒數第二。▲Firefox在Maze Solver中表現異常，落後競爭對手好幾倍。▲IE10以改寫過的「Chakra」JavaScript引擎，在此獲得第一。▲Chrome在HTML5 Test獲得第一，IE10倒數第二。▲Futuremark推出的Peace Keeper，Chrome和Opera出線，其它3家差不多糟。▲IE的硬體加速從9代開始便相當不錯，Canvas效能不意外的獲得第一。▲IE10在WebVizBench硬體加速也是第一名，但領先幅度不大。▲安全性測試還是Chrome最佳，IE10和Safari並列第二。

Acid3（標準相容性）	100分
CSS3 Test（CSS3）	51％
Maze Solver（CSS2.1∕3）	4.6秒
ECMAScript test262（JavaScript）	10960/11572
SunSpider 0.9.1（JavaScript）	190.5毫秒
HTML5 Benchmark（HTML5）	無法執行
HTML5 Test（HTML5）	278分＋額外2分
Peace Keeper（HTML5）	2296分
Canvas Performance Test（Canvas）	81幀
Psychedelic Browsing（硬體加速）	51RPM
WebVizBench（硬體加速）	3470分
BrowserScope Security（安全性）	14/17

記憶體使用量（Yahoo）	49.9MB
記憶體使用量（Yahoo、Google、Techbang、PChome、Facebook）	213.5MB

IE 10 大戰 4大瀏覽器實測，支援 HTML 5、效能並不差

Apple Safari

版本：5.1.7

測試結果：

資源消耗：