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