各大主流瀏覽器對HTML5的兼容性測試及結(jié)果分析

時間：2022-05-29 18:30:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 18:30:01 來源：網(wǎng)絡(luò)營銷

隨著HTML5技術(shù)的普及和推廣，Web開發(fā)社區(qū)逐漸開始嘗試在RIA（富互聯(lián)網(wǎng)應用，具有高度互動性、豐富用戶體驗以及功能強大的客戶端）中使用HTML5，這種實踐主要優(yōu)勢在于開發(fā)人員能夠通過HTML5的各種技術(shù)以一種前所未有的統(tǒng)一、簡潔、無插件依賴的方式實現(xiàn)炫目、復雜的Web應用，目前來說，HTML5的優(yōu)越性已經(jīng)得到了廣大開發(fā)人員的普遍認可。

不過，就像其他Web技術(shù)誕生時的情況一樣，作為新生兒的HTML5在各種Web瀏覽器中的實現(xiàn)程度或者說平臺兼容性一直是Web開發(fā)人員的心病。Web開發(fā)人員在嘗試采用HTML5技術(shù)時，一方面會為其強大的表現(xiàn)力而激動，另一方面也會因為各瀏覽器的兼容性測試而煩惱，對于其發(fā)展趨勢我也曾在億企邦的《預測HTML5的10大發(fā)展趨勢》一文中做過詳細的介紹。

自從2006年WHATWG和W3C決定合作制定HTML5標準以來（預計2012年成為候選標準），瀏覽器廠商都不甘落后，一直在努力實現(xiàn)更多的HTML5技術(shù)，不過由于各個廠商的步伐不一，導致HTML5在瀏覽器中的實現(xiàn)程度參差不齊。在億企邦的平臺上我將綜合兩種HTML5兼容性測試工具包HTML5Test和Modernizr的測試結(jié)果來分析一下Web瀏覽器的支持程度，希望能夠幫助Web開發(fā)人員在應用HTML5技術(shù)時充分考慮到平臺差異性。

一、瀏覽器的選取

由于目前市面上的瀏覽器品牌和版本繁多，我們難以覆蓋全部產(chǎn)品，因此在這里設(shè)定測試瀏覽器的選擇原則為：主流品牌、主流版本和最新版本（正式發(fā)布）。依據(jù)數(shù)據(jù)中心發(fā)布的2014年5月份瀏覽器市場占有率統(tǒng)計分布情況，主流品牌如下圖所示：


主流瀏覽器分布圖

從圖中可以看出，微軟的Internet Explorer以其混搭的IE6、IE7、IE8、IE9等多個版本仍占據(jù)了榜首（具體可查看億企邦的《如何解決IE6/IE7/IE8瀏覽器不兼容HTML5新標簽的問題》相關(guān)介紹），360瀏覽器緊隨其后，不過360瀏覽器的內(nèi)核的使用ie瀏覽器的，這其中我們還要特別注意一下火狐和Google主推的Chrome的瀏覽器，雖說在內(nèi)內(nèi)的占有率不是很高，但在國際上的份額也是不容忽視的，尤其是火狐瀏覽器，其開放的體系結(jié)構(gòu)也吸引了眾多優(yōu)秀插件，并成為Web開發(fā)人員的主要開發(fā)調(diào)試平臺。

二、HTML5兼容性分析

考慮到HTML5標準的制定原則：新特性基于HTML、CSS、DOM以及JavaScript，減少對外部插件的需求（比如Flash），獨立于設(shè)備等，在此，億企邦選取了HTML5的以下5個主要特性來評價瀏覽器系統(tǒng)。

1、視頻播放標記video

在HTML5技術(shù)出現(xiàn)之前，大部分Web視頻播放是通過瀏覽器插件如Adobe Flash來實現(xiàn)，這要求客戶在觀看視頻之前安裝相應的組件。video標記的出現(xiàn)使開發(fā)人員不再依賴于特定第三方技術(shù)，如下面的這段代碼片段播放了一個視頻文件，設(shè)定了畫面的尺寸，并帶有控制按鈕（暫停/進度條等）：

video元素潛在地支持多種視頻格式，包括：

（1）、Ogg——采用Theora視頻編碼和Vorbis音頻編碼的Ogg視頻文件；

（2）、MPEG4——采用H.264視頻編碼和AAC音頻編碼的MPEG 4視頻文件；

（3）、WebM——采用VP8視頻編碼和Vorbis音頻編碼的WebM視頻文件。

這些視頻格式在HTML5最終標準的接納程度目前還在各方博弈之中，不過瀏覽器已經(jīng)開始選擇性地支持Video標記了。

通過億企邦對其兼容性測試，其結(jié)果如下所示：


視頻標記video測試結(jié)果

這里，億企邦要提醒大家有幾點需要注意：

（1）、ie瀏覽器的IE9版本默認只支持MP EG4（H.264編碼）格式文件（支持硬件加速），如果安裝了WebM/VP8插件，可以支持WebM視頻格式。

（2）、Safari瀏覽器依靠QuickTime做視頻播放，所以Safari支持的視頻格式與QuickTime一致。請注意：QuickTime在Mac機上是預裝的，其默認支持的視頻格式是MPEG4，但在Windows系統(tǒng)上QuickTime需要手動安裝，也就是說在Windows上默認情況下Safari是不支持所有視頻格式的，這一點需要Web開發(fā)人員了解。

（3）、Firefox 4.0還將支持WebM格式。

（4）、Chrome已經(jīng)宣布不再支持MPEG格式的視頻。

（5）、Video元素有一個preload屬性，可能的值包括：

①、Auto——當頁面加載后載入整個視頻；

②、Meta——當頁面加載后只載入元數(shù)據(jù)；

③、None——當頁面加載后不載入視頻。

Web開發(fā)人員應該根據(jù)網(wǎng)頁的實際環(huán)境來選擇合適的預加載屬性以達到較好的前端性能，具體可通過億企邦的《深入解析HTML5的8大性能》相關(guān)介紹來詳細的了解，在此，我就不多說了。

2、音頻播放標記audio

與視頻標記vidio類似，音頻播放標記audio也是HTML5標準引入的元素，如下面的代碼播放了一段音頻，帶有控制按鈕：

audio潛在地支持多種音頻格式，包括Oggvorbis、MP3、AAC、wav等，不同瀏覽器對audio標記的支持程度如下圖所示：


音頻標記audio測試結(jié)果

這里，億企邦要提醒大家有幾點需要說明一下：

（1）、因為存在包含關(guān)系，所以音頻標記auido的情況基本與video的結(jié)果保持一致；

（2）、IE8對video和audio標記都不支持，IE9剛剛引入這些元素；

（3）、audio元素同樣具有preload屬性，注意正確設(shè)置屬性值。

3、繪圖標記canvas

在Web 2.0的世界里，炫目的圖形是必不可少的組成部分。HTML5引入的canvas元素支持Web開發(fā)人員通過JavaScript在頁面上繪制線條、圖形、添加文字和圖像等。如下面的這段代碼片段在頁面上簡單繪制了一個藍色矩形：

通過億企邦對其兼容性測試，其結(jié)果如下所示：


繪圖標記canvas測試結(jié)果

我們可以看到，各種瀏覽器對canvas的支持度非常高，對于IE8的限制，可以通過開源項目ExplorerCanvas來解決，只需要兩步操作：

（1）、包含js文件

（2）、直接包含canvas元素或者動態(tài)創(chuàng)建它：

4、Form 2.0表單元素

對于企業(yè)級Web應用來說，表單控件是最重要的頁面元素之一。在HTML5之前，各種類型的表單只能由開發(fā)人員通過復雜的屬性設(shè)置和限制條件（通過腳本計算）來完成（具體可查看億企邦的《解析HTML5頁面元素的嵌套規(guī)則及引起的錯誤問題》相關(guān)介紹）。

制定中的HTML5標準引入了一系列分類清晰、功能完善的表單控件標記，包括email、url、number、range、search、color等，還有表單屬性autocomplete、autofocus等。這里提供一個簡單例子，用戶填寫電子郵箱（自動檢測格式正確與否）和個人主頁（自動檢測格式正確與否）等，然后提交給后臺系統(tǒng)：

由于HTML5引入的表單控件、屬性比較多，這里選取了部分進行了測試，如下表所示：


部分表單元素測試結(jié)果

這里，億企邦要提醒大家有幾點需要說明一下：

（1）、Firefox 4.0將開始支持email、url等表單元素；

（2）、自動填充已經(jīng)作為許多瀏覽器的一項基本功能存在，與HTML 5標準的autocomplete屬性需要區(qū)別開。

5、本地客戶端存儲

Web開發(fā)人員經(jīng)常通過cookie管理客戶信息，但是當數(shù)據(jù)量比較大時，這種方法相對低效，一方面是因為cookie存在大小限制，另一方面每次都通過網(wǎng)絡(luò)請求來傳遞。HTML5引入兩種新的存儲方式：

（1）、localStorage——沒有時間限制的數(shù)據(jù)存儲。

（2）、sessionStorage——針對session的數(shù)據(jù)存儲。

下面的例子分別使用LocalStorage和SessionStorge實現(xiàn)了簡單計數(shù)器，結(jié)果下表所示：


本地客戶單存儲測試結(jié)果

這項功能對Web開發(fā)人員來說非常強大，我們來看一下瀏覽器對sessionStorage和所有測試的瀏覽器都實現(xiàn)了 HTML5的本地客戶端存儲標記！

不過，這里要提一下安全性，Web開發(fā)人員在使用這些元素時，要時刻謹記存儲在客戶端的數(shù)據(jù)可能會被授權(quán)使用瀏覽器的其他人查看甚至修改，所以需要注意保存敏感信息。

億企邦點評：

可以說，HTML5是下一代Web語言，它不單單是一種標記語言，更為下一代Web提供了全新功能，并將引領(lǐng)下一代Web實現(xiàn)類似桌面的應用體驗。

據(jù)說HTML5會帶來一個統(tǒng)一的網(wǎng)絡(luò)，無論是筆記本，臺式機，還是智能手機都應該很方便的瀏覽基于HTML5的網(wǎng)站。因此在設(shè)計網(wǎng)站的時候，開發(fā)者需要重新考慮用戶體驗，網(wǎng)站瀏覽，網(wǎng)站結(jié)構(gòu)等因素使得這個網(wǎng)站對任何硬件設(shè)備都通用。