Web兼容性评测技术

2015-05-13 23:25
信息通信技术 2015年3期
关键词:选择器跨平台评测

中国信息通信研究院 北京 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

猜你喜欢
选择器跨平台评测
跨层级网络、跨架构、跨平台的数据共享交换关键技术研究与系统建设
一款游戏怎么挣到全平台的钱?
次时代主机微软XSX全方位评测(下)
次时代主机微软XSX全方位评测(上)
74151在数据选择和组合逻辑电路中的灵活应用
攻坡新利器,TOKEN VENTOUS评测
DIV+CSS网页布局初探
深入理解CSS3结构伪类选择器
基于C++语言的跨平台软件开发的设计
Canyon Ultimate CF SLX 8.0 DI2评测