相關文章

2010 6 7 04 30 26 HTML5與Flash的話題最近吵了許多次,但無論如何網路標準朝向HTML5發展已經是勢在必行。各家瀏覽器也都開始標榜與HTML5的相容性,不過嘴砲人人會打,還是直接來個廝殺比較快,通通抓起來進行HTML5相容測試吧。

先前看到測試HTML5的方式,大多類似微軟替IE9推出的Test Drive、以及我們最近介紹的Apple推出HTML5測試網頁,以直接玩弄HTML5功能為主。本次測試HTML5的網站為html5test.com,它是類似Acid3PEACEKEEPERSunSpider等Benchmark網站,直接以數據化方式呈現,網頁也會附上測試各項HTML5功能通過與否,與實際把玩HTML5功能的取向不同。

這裡不免俗的挑選5大瀏覽器:IE8、Firefox 3.6、Chrome 5、Safari 4、Opera 10.5作為測試對象,以目前官方所公佈最新的正式版為準(測試時間:2010年6月7日下午2點22分)。html5test.com滿分為160分,以下就直接公佈殘酷的分數:

▲Chrome 5.0.375.55,html5test.com測試分數為142分。

▲Safari 4.0.5,html5test.com測試分數為115分。

▲Opera 10.53,html5test.com測試分數為102分。

▲Firefox 3.63,html5test.com測試分數為101分。

▲IE8,html5test.com測試分數為19分。

▲加映IE9 Platform Preview版本,html5test.com測試分數同樣停留在19分。

搞懂html5test在測試哪些項目?

這些HTML5測試都屬於W3C中Working Draft和Editor's Draft中的項目,共有DoctypeCanvasVideoAudioGeolocationStorageOffline Web ApplicationsWorkersSection elementsGrouping content elementsText-level semantic elementFormsUser interaction等12大類別,有興趣的網友可以點選測試網頁中的項目,連到W3C官方網站觀看相關的文件。

其實這些測試也不能說100%公平,如果翻開程式碼,仔細觀查其中有不少"-Webkit-"和"-moz-"開頭的程式碼,這些是給特定渲染引擎辨認的CSS3私有屬性,例如"-webkit-"開頭的屬性就是給webkit引擎如Chrome、Safari使用,"-moz-"則是給Firefox用的Gecko引擎(屬性名稱一看就知道是Mozilla縮寫);另外也看到一個"-o-"的標記,這是給Opera瀏覽器的Presto所使用。有了私有屬性的加持,肯定能完整呈現正確的CSS3格式。

▲影響成績的因素眾多,連不同支持立場都會左右分數高低。

此外成績也會依瀏覽器的支持立場不同有變更,例如Video測試中的H.264支援項目,只有Chrome和Safari支持H.264 codes而拿下分數,其他幾家則只支持Ogg Theora、挑明不想付權利金所以不支援H.264;最賊的還是Chrome兩邊都支援,所以拿下了滿分。Opera科技長Håkon Wium Lie前陣子來台時,也提到Opera對HTML5的支援是取決於是否已經進入W3C推薦候選名單,還沒定案的就不支援,這樣多少也會影響到整體成績表現。

綜觀各瀏覽器成績,榜首Chrome擁有飛快的更新頻率,能迅速將HTML5支援做到最好,Google本身也相當支持HTML5,還在Google I/O秀了一段HTML5的API過;Apple更是愛HTML5,Safari成績好也不難理解。擁有一堆CSS3私有屬性的Firefox竟然不比沒什麼私有屬性的Opera佔到多少便宜,只能說Opera有CSS之父Håkon Wium Lie加持果然不一樣;至於IE8......也不意外啦,人家才不甩你有沒有HTML5,反正它已經是全球市占率最高的瀏覽器了(詳見Net ApplicationsStatCounter調查)。

另外IE9雖然有在自己的Test Drive測試網頁上搞些HTML5相關的名堂,怎麼在這邊測試還是落到如此下場,可能是比起HTML5他們更醉心在GPU硬體加速功能上,但因為現在IE9只是Preview版本,這邊就先放過他吧。

HTML5加碼再測試

這網站還另外端出一個更多HTML5功能的測試網頁,網址為beta.html5test.com,總分提升到了300分。我們繼續把5大瀏覽器丟進去跑跑看成績:

▲Chrome 5.0.375.55,beta.html5test.com測試分數為192分,外加7個加分題。

▲Safari 4,beta.html5test.com測試分數為分128分,同樣多了7個加分。

▲Opera 10.5,beta.html5test.com測試分數為129分,多了4個加分。

▲Firefox 3.6,beta.html5test.com測試分數為139分,多了4個加分。

▲IE8,beta.html5test.com測試分數為27分,並沒有拿下任何加分。

▲加映IE9 Platform Preview版本 ,beta.html5test.com測試分數贏過IE8拿下32分。

成績排名與預想的差不多。這些測試其實不能代表什麼,因為HTML5還尚未定案(樂觀估計也要2012年後);同時瀏覽器畢竟是上網工具,不同於CPU、顯示卡測數據這麼客觀,對每位使用者好用與否的主觀因素才是更重要。

延伸閱讀:

Opera技術長Håkon Wium Lie來台,談HTML5與CSS3

【搜文解字】HTML5,帶動網路進步的次世代標準

【O專欄】SVG:可縮放向量圖形的好處與可能性

【O專欄】CSS 3:網頁外觀新衝擊之字型篇

【O專欄】CSS3:網頁外觀新衝擊之圖像背景加工篇

【O專欄】備受矚目的 HTML5 Video標籤

【O專欄】搭配網路標準讓HTML5 Video更活潑

使用 Facebook 留言

Ac07ef11c63cb9a8802bab62ab011d20?size=48&default=wavatar
2.  鬆鬆松鼠 (發表於 2010年6月08日 09:45)
iphone的Safari測出來也有113 XD
在第一個測試終
4402a318a6989f067758a9f9fe84356b?size=48&default=wavatar
3.  鬆鬆松鼠 (發表於 2010年6月08日 09:45)
iphone的Safari測出來也有113 XD
在第一個測試終
E303cef3eacf6d07dcbb972ff2671d35?size=48&default=wavatar
6.  . (發表於 2010年6月08日 15:38)
很怪異
怎麼我測的分數與作者的一樣
理論上OS的不同、硬體的不同,分數都會有差異
但...怎麼可能分數完全一樣?
難道分數是預設好的?(那就沒公信力了)
B3b42315af060ac3c7a533ded7804112?size=48&default=wavatar
1人給推

7.  cc (發表於 2010年6月08日 18:03)
測的是「各項功能的有無」而不是「測速度」,
當然大多數情況會一樣啊。
C792eee138c0694fae853d78dd580dfc?size=48&default=wavatar
9.  abcliou (發表於 2010年6月08日 19:09)
chrome我測出來是197耶= =
跟上面的192不一樣!!!
B2e326b98570f4d21f8bb7db0270b488?size=48&default=wavatar
12.  Pighead (發表於 2010年6月16日 07:08)
用 html5test.com 測試 Chrome5,
分數是197...怪了
無痕
1人給推

13.  無痕 (發表於 2010年6月28日 17:11)
前後 TEST 版本分數上面有一點差異。
IE分數好好笑XD
5be844214037850c304c1e6a05dc5277?size=48&default=wavatar
1人給推

15.  ... (發表於 2010年12月20日 20:24)
※ 引述《無痕》的留言:
> 前後 TEST 版本分數上面有一點差異。
> IE分數好好笑XD

其實這些測試也不能說100%公平,如果翻開程式碼,仔細觀查其中有不少"-Webkit-"和"-moz-"開頭的程式碼,這些是給特定渲染引擎辨認的 CSS3私有屬性,例如"-webkit-"開頭的屬性就是給webkit引擎如Chrome、Safari使用,"-moz-"則是給Firefox用的Gecko引擎(屬性名稱一看就知道是Mozilla縮寫);另外也看到一個"-o-"的標記,這是給Opera瀏覽器的Presto所使用。有了私有屬性的加持,肯定能完整呈現正確的CSS3格式。
8220febe79a3b16e16374d7c606e0f6e?size=48&default=wavatar
16.  123 (發表於 2010年12月20日 20:31)
這種偏向明顯的測試根本就只是在搞笑而已 ╯-__-)╯ ╩╩

看看 W3C 確認過的成果吧!
http://0rz.tw/N1Vdf
(The Internet Explorer team remains committed to making W3C and Ecma International web standards successful.)

再測看看真假CSS3哆啦A夢測試
一個(fake-doria.htm)有 -webkit, -moz, -o
一個(doria.htm)沒有
http://FDN.me/7F88BUU8

發表回應

謹慎發言,尊重彼此。按此展開留言規則