紅軟基地 推薦
2012-07-26
如果現(xiàn)在還有哪款瀏覽器不支持HTML5，那真的可以說(shuō)是弱爆了！HTML5作為當(dāng)前最熱門的網(wǎng)頁(yè)技術(shù)，已經(jīng)成為多數(shù)網(wǎng)頁(yè)開(kāi)發(fā)人員的首選，各大瀏覽 器廠商也都對(duì)HTML5相當(dāng)重視。雖然現(xiàn)在大部分瀏覽器都已經(jīng)支持HTML5，但由于所使用的內(nèi)核引擎不同，所以每款產(chǎn)品對(duì)HTML5的支持程度也會(huì)有所 不同。
除HTML5之外，CSS3同樣是網(wǎng)頁(yè)制作中非常重要的一項(xiàng)技術(shù)，雖然可以實(shí)現(xiàn)的功能不及HTML5那么豐富，但CSS樣式表是最基本的網(wǎng)頁(yè)CSS3的應(yīng)用范圍更廣、使用率更高。因此，對(duì)CSS3的支持程度，同樣可以看出一款瀏覽器的性能優(yōu)劣。
讓效果說(shuō)話 8款主流瀏覽器網(wǎng)頁(yè)特效實(shí)測(cè)
為了讓大家更直觀的了解到究竟哪款瀏覽器對(duì)HTML5和CSS3有更好的支持，本次測(cè)試我們除了使用傳統(tǒng)的測(cè)試工具進(jìn)行跑分對(duì)比之外，還會(huì)通過(guò)兩個(gè)網(wǎng)頁(yè)實(shí)例，對(duì)當(dāng)前主流的8款PC瀏覽器進(jìn)行測(cè)試，效果好不好，一看就知道！
●參評(píng)軟件下載
| 瀏覽器名稱 | 版本號(hào) | 下載地址 |
| Google Chrome瀏覽器 | 20.0.1132.57 | 紅軟基地高速下載 |
| IE9瀏覽器 | 9.0.8112.16421 | 紅軟基地高速下載 |
| Firefox瀏覽器 | 14.0.1 | 紅軟基地高速下載 |
| Opera瀏覽器 | 12.01 | 紅軟基地高速下載 |
| Safari瀏覽器 | 5.1.7 | 紅軟基地高速下載 |
| 搜狗瀏覽器 | 3.2.0.4716 | 紅軟基地高速下載 |
| QQ瀏覽器 | 6.14 | 紅軟基地高速下載 |
| 傲游瀏覽器 | 3.4.2.1000 | 紅軟基地高速下載 |
●評(píng)測(cè)環(huán)境
| 評(píng)測(cè)環(huán)境 | |
| 操作系統(tǒng) | Windows 7 專業(yè)版 |
| CPU型號(hào) | 英特爾 奔騰 B940 2.00GHz |
| 內(nèi)存容量 | 2GB DDR3 |
| 硬盤容量 | 500GB |
| 顯卡類型 | NVIDIA GeForce GT 520M， 1GB獨(dú)立顯存 |
●測(cè)試項(xiàng)目說(shuō)明
什么是HTML5
HTML5是用于取代1999年所制定的HTML4.01和XHTML 1.0標(biāo)準(zhǔn)的HTML標(biāo)準(zhǔn)版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些HTML5技術(shù)。HTML5有兩大特點(diǎn)：首先，強(qiáng)化了Web網(wǎng)頁(yè)的表現(xiàn)性 能。其次，追加了本地?cái)?shù)據(jù)庫(kù)等Web應(yīng)用的功能。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。
什么是CSS3
CSS即層疊樣式表(Cascading Stylesheet)。在網(wǎng)頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些 簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。以 前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來(lái)。
HTML5工具測(cè)試：QQ瀏覽器勝出
html5test是被業(yè)界承認(rèn)的一款瀏覽器HTML5性能測(cè)試工具，通過(guò)它可以測(cè)試出瀏覽器對(duì)各種HTML5標(biāo)記的支持程度，包括文字、視頻、音頻、元素、表單、用戶交互等等，并對(duì)每個(gè)項(xiàng)目進(jìn)行打分，最后給出瀏覽器整體得分。
HTML5測(cè)試工具打分
8款瀏覽器HTML5工具測(cè)試結(jié)果(滿分500)：
| 瀏覽器名稱 | 得分 |
| Google Chrome瀏覽器 | 414 |
| IE9瀏覽器 | 138 |
| Firefox瀏覽器 | 345 |
| Opera瀏覽器 | 400 |
| Safari瀏覽器 | 278 |
| 搜狗瀏覽器 | 393 |
| QQ瀏覽器 | 476 |
| 傲游瀏覽器 | 419 |
從HTML5工具測(cè)試的得分結(jié)果可以看出，在滿分為500的測(cè)試中，IE和Safari都沒(méi)能突破及格線，F(xiàn)irefox和搜狗勉強(qiáng)過(guò)關(guān)，Chrome、Opera和傲游實(shí)力相當(dāng)，QQ瀏覽器比較意外地獲得了最好成績(jī)476分。
那么，在接下來(lái)的實(shí)例測(cè)試中，這8款瀏覽器又會(huì)有怎樣的表現(xiàn)？是否與測(cè)試工具中的得分情況一致呢？
HTML5實(shí)例測(cè)試：Chrome和IE9完勝
HTML5實(shí)例測(cè)試我們選擇的是一個(gè)Web版鋼琴應(yīng)用，主要測(cè)試瀏覽器對(duì)HTML5聲音、動(dòng)態(tài)效果、用戶交互的處理情況。用戶可以從下拉列表中選擇曲目播放，在播放的同時(shí)下方會(huì)有像勁樂(lè)團(tuán)等彈奏游戲那樣的條形音符向上滾動(dòng)，也可以用鼠標(biāo)點(diǎn)擊鋼琴鍵盤自己彈奏。
HTML5鋼琴實(shí)例
需要說(shuō)明的是，在鋼琴實(shí)例中測(cè)試交互能力時(shí)，我們采用的方法是用鼠標(biāo)先從左到右，再?gòu)挠业阶髲匿撉冁I盤上快速滑過(guò)，檢查鼠標(biāo)滑過(guò)時(shí)琴鍵動(dòng)作是否流暢，是否 每個(gè)音階都能來(lái)得及發(fā)出聲音。因?yàn)槿绻麨g覽器處理得不好，就會(huì)出現(xiàn)琴鍵動(dòng)作的速度趕不上鼠標(biāo)操作速度，從而出現(xiàn)動(dòng)作和聲音滯后的問(wèn)題。
為了保證測(cè)試結(jié)果的公平性，在測(cè)試過(guò)程中所有瀏覽器選擇的都是第64首曲目。
8款瀏覽器HTML5實(shí)例測(cè)試結(jié)果：
| 瀏覽器名稱 | 聲音 | 動(dòng)態(tài)效果 | 交互 |
| Google Chrome瀏覽器 | 有 | 流暢 | 流暢 |
| IE9瀏覽器 | 有 | 流暢 | 流暢 |
| Firefox瀏覽器 | 有 | 略卡 | 動(dòng)作和聲音比操作滯后 |
| Opera瀏覽器 | 有 | 卡 | 動(dòng)作和聲音比操作滯后 |
| Safari瀏覽器 | 無(wú)法打開(kāi)頁(yè)面 | ||
| 搜狗瀏覽器 | 無(wú) | 略卡 | 操作流暢，沒(méi)有聲音 |
| QQ瀏覽器 | 無(wú) | 略卡 | 操作流暢，沒(méi)有聲音 |
| 傲游瀏覽器 | 有 | 略卡 | 動(dòng)作和聲音比操作稍有滯后 |
經(jīng)測(cè)試，除了Safari一直處于讀取狀態(tài)，無(wú)法打開(kāi)頁(yè)面之外，其余7款瀏覽器都可以正常打開(kāi)，但搜狗和QQ瀏覽器播放音樂(lè)時(shí)沒(méi)有聲音。在動(dòng)態(tài)效果方 面，Chrome和IE9的音符滾動(dòng)最流暢，其余6款瀏覽器都會(huì)有不同程度的卡頓現(xiàn)象。而在進(jìn)行交互時(shí)，Chrome、IE9、搜狗和QQ瀏覽器的操作都 很流暢，只可惜搜狗和QQ瀏覽器沒(méi)有聲音；而Firefox、Opera和傲游瀏覽器，鼠標(biāo)滑過(guò)琴鍵時(shí)的動(dòng)作和聲音就不夠連續(xù)。
感興趣的用戶也可以打開(kāi)HTML5鋼琴實(shí)例測(cè)試一下自己的瀏覽器。
CSS3工具測(cè)試：7款滿分通關(guān)
CSS3 Selectors Test是一款專業(yè)的CSS3測(cè)試工具，啟動(dòng)它會(huì)自動(dòng)運(yùn)行一個(gè)小的測(cè)試，共包含574個(gè)測(cè)試項(xiàng)。點(diǎn)擊結(jié)果中列出的每個(gè)項(xiàng)目，可以查看相應(yīng)代碼。另外，由于 CSS3 Selectors Test不能模擬用戶操作，所以測(cè)試項(xiàng)目中不包括選擇、懸停等需要交互的項(xiàng)目。
CSS3測(cè)試工具
8款瀏覽器CSS3工具測(cè)試結(jié)果(滿分574)：
| 瀏覽器名稱 | 得分 |
| Google Chrome瀏覽器 | 574 |
| IE9瀏覽器 | 574 |
| Firefox瀏覽器 | 574 |
| Opera瀏覽器 | 574 |
| Safari瀏覽器 | 574 |
| 搜狗瀏覽器 | 574 |
| QQ瀏覽器 | 327 |
| 傲游瀏覽器 | 574 |
CSS3用工具測(cè)試的結(jié)果比較令人欣慰，僅QQ瀏覽器沒(méi)有拿到滿分，另外7款瀏覽器全部滿分通關(guān)。那么，在CSS3實(shí)例測(cè)試中，8款瀏覽器表現(xiàn)又會(huì)如何呢？
CSS3實(shí)例測(cè)試：水平差距較大
CSS3實(shí)例測(cè)試我們選擇的是多啦A夢(mèng)測(cè)試，頁(yè)面左側(cè)看到的多啦A夢(mèng)并不是一張圖片，而是用純CSS代碼構(gòu)建的圖形，沒(méi)有一張圖片，專門用于測(cè)試各瀏覽器 對(duì)CSS3的支持效果。在這項(xiàng)測(cè)試中，如果瀏覽器對(duì)CSS3的處理效果好，頁(yè)面上就會(huì)出現(xiàn)一個(gè)有立體效果，且眼球每隔10秒會(huì)動(dòng)一下的多啦A夢(mèng)。
CSS3多啦A夢(mèng)實(shí)例測(cè)試參考標(biāo)準(zhǔn)
如果瀏覽器對(duì)CSS3的支持效果不好，你看到的多啦A夢(mèng)就會(huì)有效果上的缺失。比如眼球不會(huì)動(dòng)、斜線變直線、沒(méi)有陰影等等。下面就是幾個(gè)對(duì)CSS3支持不夠好的瀏覽器顯示效果：
CSS3多啦A夢(mèng)測(cè)試結(jié)果示例
8款瀏覽器CSS3實(shí)例測(cè)試結(jié)果：
在顯示效果上，Chrome、Safari、QQ瀏覽器、傲游瀏覽器和搜狗瀏覽器能夠完整的顯示多啦A夢(mèng)所有特效，包括眼球的動(dòng)態(tài)效果；Firefox和Opera的圖形顯示沒(méi)有問(wèn)題，但多啦A夢(mèng)的眼球不會(huì)動(dòng)。
IE9多啦A夢(mèng)測(cè)試結(jié)果
只有IE9的結(jié)果比較令人失望，眼球的動(dòng)態(tài)效果和陰影部分都沒(méi)有顯示出來(lái)。
同樣，感興趣的用戶也可以在自己的瀏覽器中打開(kāi)CSS3多啦A夢(mèng)實(shí)例測(cè)試一下。
評(píng)測(cè)總結(jié)：
總體來(lái)說(shuō)，Google Chrome瀏覽器無(wú)論跑數(shù)據(jù)還是測(cè)實(shí)例，在HTML5和CSS3這兩方面都有不錯(cuò)的表現(xiàn)；IE9在HTML5的數(shù)據(jù)測(cè)試中分?jǐn)?shù)較低，但實(shí)例測(cè)試效果很 好，在CSS3測(cè)試中則正好相反；Firefox、Opera和Safari瀏覽器在兩項(xiàng)測(cè)試中都沒(méi)有表現(xiàn)出太多優(yōu)勢(shì)；搜狗和QQ瀏覽器對(duì)HTML5聲音 標(biāo)記處理有所缺失，因此在HTML5實(shí)例測(cè)試中表現(xiàn)不佳，但在CSS3實(shí)例測(cè)試中的表現(xiàn)不錯(cuò)，圖形顯示和動(dòng)態(tài)效果都能很好的表現(xiàn)出來(lái)；傲游瀏覽器在這次測(cè) 試中的成績(jī)則處于中等水平。
本次測(cè)試雖然項(xiàng)目不多，但擺脫了以往單純“堆數(shù)據(jù)”的測(cè)試方法，通過(guò)兩個(gè)實(shí)例對(duì)8款主流瀏覽器的HTML5和CSS3支持效果進(jìn)行了最直觀的對(duì)比。從測(cè)試 結(jié)果中可以看出，實(shí)例測(cè)試的效果與數(shù)據(jù)測(cè)試之間還是存在較大差異的，這除了與瀏覽器自身性能有關(guān)之外，與網(wǎng)頁(yè)本身的代碼編寫也有一定關(guān)系，因?yàn)榫W(wǎng)頁(yè)開(kāi)發(fā)者 并不一定會(huì)在所有瀏覽器中進(jìn)行測(cè)試。
來(lái)源：中關(guān)村在線 作者：劉菲菲