Web兼容性評(píng)測技術(shù)

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

引言

以HTML5、CSS3、Javascript為代表的新一代Web技術(shù)是Web前端技術(shù)的重大突破，極大提升Web在移動(dòng)智能終端上的展現(xiàn)、交互及資源調(diào)用能力，促使終端Web應(yīng)用運(yùn)行環(huán)境成為新的標(biāo)準(zhǔn)化、全功能應(yīng)用承載平臺(tái)，引領(lǐng)應(yīng)用服務(wù)跨平臺(tái)發(fā)展的新方向。但我國Web應(yīng)用生態(tài)仍面臨應(yīng)用運(yùn)行環(huán)境碎片化、執(zhí)行效率較低、生態(tài)系統(tǒng)關(guān)鍵環(huán)節(jié)缺失等問題。因此，綜合市場、產(chǎn)業(yè)、政府多方面要求，在兼容國際標(biāo)準(zhǔn)基礎(chǔ)上，推進(jìn)我國相應(yīng)的標(biāo)準(zhǔn)制定和國際化，開發(fā)相應(yīng)評(píng)測工具，搭建評(píng)測驗(yàn)證環(huán)境，促進(jìn)我國Web應(yīng)用生態(tài)的發(fā)展。

1 HTML5兼容性評(píng)測研究

1.1 HTML5技術(shù)介紹

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

2012年， HTML5的標(biāo)準(zhǔn)在更加細(xì)化的過程中不斷趨于穩(wěn)定，雖然其中也有一些局部的調(diào)整，但變動(dòng)都不是很大。相較于過去3年，2012年新增的內(nèi)容非常少，而且都屬于一些細(xì)節(jié)和增強(qiáng)，例如對已有元素增加新的屬性，或?yàn)橐延薪涌谠黾有碌姆椒ǖ取?/p>

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

相對于PC平臺(tái)而言，移動(dòng)平臺(tái)一直是開發(fā)者更為關(guān)心的，因?yàn)橐苿?dòng)平臺(tái)瀏覽器品種較少，版本也普遍集中在最新正式版。同時(shí)，由于移動(dòng)設(shè)備的更新?lián)Q代速度要比PC更快，硬件支持和瀏覽器的狀況都要比PC平臺(tái)的狀況更好。移動(dòng)平臺(tái)上主流的5款瀏覽器(iOS Safari，Android Browser，Opera Mobile，Chrome for Android，F(xiàn)irefox for Android)，目前對標(biāo)準(zhǔn)的支持度均已高于60%。

通過各款瀏覽器最新版本對HTML5特性的支持狀況來分析，44.4%的特性得到了跨平臺(tái)跨瀏覽器的完全支持。HTML5技術(shù)跨平臺(tái)的特性以及移動(dòng)互聯(lián)網(wǎng)的蓬勃發(fā)展，使得開發(fā)者們更加重視移動(dòng)終端上標(biāo)準(zhǔn)的支持程度。

1.2 HTML5兼容性測試方法

HTML5對舊標(biāo)準(zhǔn)的擴(kuò)充可以說是革命性的，顛覆了Web前端的面貌，它徹底解決不同硬件平臺(tái)底層支持不統(tǒng)一、上層應(yīng)用不兼容的問題，規(guī)范人機(jī)交互以及應(yīng)用接口，使得HTML5應(yīng)用可以具有跨平臺(tái)的特性。2D/3D繪圖能力、影音能力、底層硬件接口調(diào)用的能力、網(wǎng)絡(luò)服務(wù)、多線程支持、文件操作、本地存儲(chǔ)等技術(shù)，極大地?cái)U(kuò)展了Web前端的能力，使得開發(fā)功能強(qiáng)大的Web應(yīng)用更加簡便。

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

圖1 html5test.com測試截圖

2 CSS3兼容性評(píng)測研究

2.1 CSS3技術(shù)介紹

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

CSS3為我們帶來的驚喜不只是簡單的功能性增強(qiáng)，更多的是一種對Web UI設(shè)計(jì)理念和方法的變革。CSS3結(jié)合HTML5使得Web應(yīng)用可以提供和本地應(yīng)用程序一樣甚至更強(qiáng)大的功能，并且有更好的用戶體驗(yàn)，同時(shí)也不需要額外安裝軟件，不必對軟件版本升級(jí)兼容性等麻煩問題擔(dān)憂?？梢詴诚?，在未來的PC上我們已經(jīng)不需要操作系統(tǒng)以及任何其他應(yīng)用程序，開機(jī)只需要一個(gè)瀏覽器就可以解決所有問題。相信未來CSS3配合HTML5標(biāo)準(zhǔn)，將引起一場Web應(yīng)用的極大變革，甚至是整個(gè)互聯(lián)網(wǎng)產(chǎn)業(yè)的變革[1]。

2.2 CSS3兼容性測試方法

我們需要研究所有功能的具體規(guī)定，并研究針對這些技術(shù)標(biāo)準(zhǔn)的兼容性評(píng)測方案，以實(shí)現(xiàn)一套針對CSS3的兼容性評(píng)測工具。針對不同的功能點(diǎn)，測試方案的選取需要按照其本身特性來制定?？傮w上目前對CSS3特性進(jìn)行測試的主流工具有以下兩種。

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

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

圖2 CSS3 Selectors Test測試

圖3 哆啦A夢CSS3測試

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

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

3 JavaScript兼容性評(píng)測研究

3.1 JavaScript技術(shù)介紹

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

JavaScript語言發(fā)展主要?dú)v經(jīng)三個(gè)版本。

ECMA-262 Edition 1：1997年，以JavaScript1.1為藍(lán)本的建議被提交到ECMA(歐洲計(jì)算機(jī)制造商委員會(huì))，并于當(dāng)年完成了ECMA-262 Edition 1的語言標(biāo)準(zhǔn)。

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

ECMA-262 Edition 5：2009年末發(fā)布。作為未來的JavaScript標(biāo)準(zhǔn)，該版本向后兼容并引入了嚴(yán)格模式，啟用嚴(yán)格模式后，會(huì)對程序代碼安全性和性能有正面作用，同時(shí)改版增加了對對象的功能擴(kuò)展。

Java Script兼容性一直是Web應(yīng)用開發(fā)中存在的重要問題。當(dāng)前，Java Script在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間存在顯著差異，嚴(yán)重影響Web應(yīng)用的跨平臺(tái)特性[3]。

3.2 JavaScript兼容性測試方法

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

Acid3 網(wǎng)頁表示瀏覽器需采用默認(rèn)值測試，在動(dòng)畫流暢顯示、分?jǐn)?shù)達(dá)到100/100時(shí)，視為通過。如表1所示[4]。

4 結(jié)語

我們應(yīng)在標(biāo)準(zhǔn)體系和總體推進(jìn)策略指導(dǎo)下，綜合市場、產(chǎn)業(yè)、政府對Web技術(shù)的多方面要求，聯(lián)合Web平臺(tái)廠商、終端廠商、互聯(lián)網(wǎng)公司、運(yùn)營商、標(biāo)準(zhǔn)化組織、應(yīng)用開發(fā)者等產(chǎn)業(yè)主體，兼顧國際國內(nèi)，制定我國支持Web的相關(guān)技術(shù)標(biāo)準(zhǔn)，對Web兼容性方面的技術(shù)要求和測試方法進(jìn)行規(guī)范。同時(shí)，以我國參加W3C的成員企業(yè)、標(biāo)準(zhǔn)化組織、應(yīng)用開發(fā)者社區(qū)等為核心，建立市場化的標(biāo)準(zhǔn)推進(jìn)機(jī)制，推動(dòng)相關(guān)標(biāo)準(zhǔn)的制定與國際化，完善測試工具研發(fā)，不斷推進(jìn)支持Web技術(shù)的兼容性，形成我國自主Web應(yīng)用生態(tài)的規(guī)模效益，更好地服務(wù)于整個(gè)Web行業(yè)。

表1 主流瀏覽器Javascript兼容性評(píng)測結(jié)果

參考文獻(xiàn)

[1] 廖偉華.圖解CSS3:核心技術(shù)與案例實(shí)戰(zhàn)[M].北京:機(jī)械工業(yè)出版社,2014:1-15

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

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

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