Web兼容性評測技術

中國信息通信研究院 北京 100191

引言

以HTML5、CSS3、Javascript為代表的新一代Web技術是Web前端技術的重大突破，極大提升Web在移動智能終端上的展現、交互及資源調用能力，促使終端Web應用運行環境成為新的標準化、全功能應用承載平臺，引領應用服務跨平臺發展的新方向。但我國Web應用生態仍面臨應用運行環境碎片化、執行效率較低、生態系統關鍵環節缺失等問題。因此，綜合市場、產業、政府多方面要求，在兼容國際標準基礎上，推進我國相應的標準制定和國際化，開發相應評測工具，搭建評測驗證環境，促進我國Web應用生態的發展。

1 HTML5兼容性評測研究

1.1 HTML5技術介紹

HTML是超文本標記語言(Hypertext Markup Language)的簡寫，而5則是指其版本號，表示第5個版本，目前業界普遍使用的是W3C于1999年正式發布的HTML V4.0版本，一般廣義上講的HTML5包括Html、Css和JavaScript三個部分。

2012年， HTML5的標準在更加細化的過程中不斷趨于穩定，雖然其中也有一些局部的調整，但變動都不是很大。相較于過去3年，2012年新增的內容非常少，而且都屬于一些細節和增強，例如對已有元素增加新的屬性，或為已有接口增加新的方法等。

在PC瀏覽器平臺，2012年中IE6至IE8的市場份額已經明顯下降，而Chrome、Safari、Firefox和Opera等瀏覽器市場份額則在不斷擴大，這些獨立瀏覽引擎的瀏覽器一直將對標準的支持放在很重要的位置，通過不斷升級來保證對最新HTML5特性的支持，微軟也從IE9開始投入大量資源在HTML5上，IE10對HTML5特性的支持已經達到60%以上。

相對于PC平臺而言，移動平臺一直是開發者更為關心的，因為移動平臺瀏覽器品種較少，版本也普遍集中在最新正式版。同時，由于移動設備的更新換代速度要比PC更快，硬件支持和瀏覽器的狀況都要比PC平臺的狀況更好。移動平臺上主流的5款瀏覽器(iOS Safari，Android Browser，Opera Mobile，Chrome for Android，Firefox for Android)，目前對標準的支持度均已高于60%。

通過各款瀏覽器最新版本對HTML5特性的支持狀況來分析，44.4%的特性得到了跨平臺跨瀏覽器的完全支持。HTML5技術跨平臺的特性以及移動互聯網的蓬勃發展，使得開發者們更加重視移動終端上標準的支持程度。

1.2 HTML5兼容性測試方法

HTML5對舊標準的擴充可以說是革命性的，顛覆了Web前端的面貌，它徹底解決不同硬件平臺底層支持不統一、上層應用不兼容的問題，規范人機交互以及應用接口，使得HTML5應用可以具有跨平臺的特性。2D/3D繪圖能力、影音能力、底層硬件接口調用的能力、網絡服務、多線程支持、文件操作、本地存儲等技術，極大地擴展了Web前端的能力，使得開發功能強大的Web應用更加簡便。

目前，HTML5兼容性評測主要用到的工具是html5test.com，訪問html5test.com就可以根據瀏覽器支持HTML5規范的程度來對瀏覽器打出相應的分數，而且還可以跟其他瀏覽器對比，如圖1所示。主要支持的特性有：解析規則、元素、表單、微數據、定位、輸出、輸入、會話、點對點、用戶交互、性能、安全、歷史導航、視頻、音頻、圖片、2D 圖形、3D 圖形、動畫、Web應用、存儲、文件、流、Web 容器等。

圖1 html5test.com測試截圖

2 CSS3兼容性評測研究

2.1 CSS3技術介紹

除HTML5外，CSS3將是互聯網發展的另一個趨勢。HTML5的發展給Web前端技術增加了十分強大的功能，而CSS3的提出則是為了提高Web前端的性能。在CSS語言下，不需要圖片，僅用文字即可展現十分炫麗的網頁效果。這讓網頁的文字在變得越來越漂亮的同時，不但不會影響瀏覽速度，并且還能被搜索引擎搜索。除了在提升網頁瀏覽速度方面的優勢之外，CSS還具有表現和內容相分離、易于維護和改版等優勢。

CSS3為我們帶來的驚喜不只是簡單的功能性增強，更多的是一種對Web UI設計理念和方法的變革。CSS3結合HTML5使得Web應用可以提供和本地應用程序一樣甚至更強大的功能，并且有更好的用戶體驗，同時也不需要額外安裝軟件，不必對軟件版本升級兼容性等麻煩問題擔憂。可以暢想，在未來的PC上我們已經不需要操作系統以及任何其他應用程序，開機只需要一個瀏覽器就可以解決所有問題。相信未來CSS3配合HTML5標準，將引起一場Web應用的極大變革，甚至是整個互聯網產業的變革[1]。

2.2 CSS3兼容性測試方法

我們需要研究所有功能的具體規定，并研究針對這些技術標準的兼容性評測方案，以實現一套針對CSS3的兼容性評測工具。針對不同的功能點，測試方案的選取需要按照其本身特性來制定。總體上目前對CSS3特性進行測試的主流工具有以下兩種。

1) CSS3 Selectors Test。CSS3 Selectors Test是CCS3選擇器其中一項測試項目。啟動測試后，網頁頁面內套件會自動運行一個小測試，這將確定瀏覽器是否能夠兼容大量CSS選擇器中的測試項目。如果項目不被兼容，則該項就被標記為一個特定的標簽。點擊每個CSS選擇器的按鈕可查看到結果，每個測試都包含這一個小案例，以便給使用者提供對應的解釋。在技術上，CSS3 Selectors Test在模擬某些用戶交互測試時是有限的，不僅僅依賴于用戶交互的CSS選擇器。幾乎所有的瀏覽器都無法檢測到訪問和未訪問鏈接之間隱私的變化，所以這個測試套件不包括以下的選擇器測試：:hover，:active，:focus and :selection。標注綠色代表瀏覽器已經支持的特性，如出現標注紅色則代表此瀏覽器暫時不支持的特性，如圖2所示。

2) 哆啦A夢CSS3 Test。繪制哆啦A夢，屬于CSS3兼容性能最常見的一種測試，主要用來測試瀏覽器對CSS3規范的支持情況。在該項測試中，可直觀地看出不同瀏覽器的特效錯誤數據，錯誤越少則兼容性越好，

圖2 CSS3 Selectors Test測試

圖3 哆啦A夢CSS3測試

Chrome5.0Firefox3.6 Opera10.53 IE8如圖3所示[2]。

從直觀的測試結果可看出，Chrome表現優異，而且眼睛還能動。Firefox色彩效果還行但眼睛不動，Opera已快看不到漸變色，IE的哆啦a夢變成了方的。由此可得知，Chrome全面支持CSS3特性，Firefox、Opera存在部分兼容性錯誤，IE顯得略微遜色。

3 JavaScript兼容性評測研究

3.1 JavaScript技術介紹

JavaScript是目前Web應用程序開發者使用最為廣泛的客戶端腳本編程語言，它不僅可用來開發交互式的Web頁面，更重要的是它將HTML5、CSS等功能強大的Web規范有機結合起來，使開發人員能快捷生成Internet或Intranet上使用的分布式應用程序。

JavaScript語言發展主要歷經三個版本。

ECMA-262 Edition 1：1997年，以JavaScript1.1為藍本的建議被提交到ECMA(歐洲計算機制造商委員會)，并于當年完成了ECMA-262 Edition 1的語言標準。

EAMA-262 Edition 3：1999年12月發布，修改的內容涉及到字符串處理、錯誤定義和數值輸出，還增加了正則表達式、新控制語句、try-catch異常處理的支持，第三版標志著ECMAScript成為了一門真正的編程語言。

ECMA-262 Edition 5：2009年末發布。作為未來的JavaScript標準，該版本向后兼容并引入了嚴格模式，啟用嚴格模式后，會對程序代碼安全性和性能有正面作用，同時改版增加了對對象的功能擴展。

Java Script兼容性一直是Web應用開發中存在的重要問題。當前，Java Script在正式規范、事實標準以及各種實現之間存在顯著差異，嚴重影響Web應用的跨平臺特性[3]。

3.2 JavaScript兼容性測試方法

目前市面上主流的測試工具是Acid3，Acid3由網頁標準計劃小組(Web Standards Project，WaSP)設計，是一份網頁瀏覽器及設計軟件之標準兼容性的測試網頁，于2008年3月3日正式發布。其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data:URL。用瀏覽器打開此測試網頁后，頁面會不斷加載功能、直接給予分數，滿分為100分。

Acid3 網頁表示瀏覽器需采用默認值測試，在動畫流暢顯示、分數達到100/100時，視為通過。如表1所示[4]。

4 結語

我們應在標準體系和總體推進策略指導下，綜合市場、產業、政府對Web技術的多方面要求，聯合Web平臺廠商、終端廠商、互聯網公司、運營商、標準化組織、應用開發者等產業主體，兼顧國際國內，制定我國支持Web的相關技術標準，對Web兼容性方面的技術要求和測試方法進行規范。同時，以我國參加W3C的成員企業、標準化組織、應用開發者社區等為核心，建立市場化的標準推進機制，推動相關標準的制定與國際化，完善測試工具研發，不斷推進支持Web技術的兼容性，形成我國自主Web應用生態的規模效益，更好地服務于整個Web行業。

表1 主流瀏覽器Javascript兼容性評測結果

參考文獻

[1] 廖偉華.圖解CSS3:核心技術與案例實戰[M].北京:機械工業出版社,2014:1-15

[2] 中關村在線.哆啦A夢CSS3[EB/OL].[2015-02-10].http://soft.zol.com.cn/340/3407063.html

[3]Nicholas C.Zakas.JavaScript高級程序設計,第3版[M].李松峰,曹力,譯.北京:人民郵電出版社,2012:1-9

[4]wiki百科.acid3測試工具[EB/OL].[2015-01-17].http://zh.wikipedia.org/wiki/Acid3