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