HTML 5混战:Chrome、Safari、火狐、IE以及Opera各显其能

译文
移动开发 浏览器
自从“HTML 5”作为热门词汇出现在我们面前至今已经过去了四年,时至今日我们是否真的有理由信任以浏览器为平台的JavaScript所拥有的强大实力?时光如箭、岁月如梭,一年又一年就在我们敲击键盘编码的同时悄然逝去了。

Chrome与Opera在支持最新Web功能方面更为出色,但不同浏览器之间的差异恐怕并不像表面上看起来那么明显。

自从“HTML 5”作为热门词汇出现在我们面前至今已经过去了四年,时至今日我们是否真的有理由信任以浏览器为平台的JavaScript所拥有的强大实力?时光如箭、岁月如梭,一年又一年就在我们敲击键盘编码的同时悄然逝去了。

HTML 5如今已经重新回到了人们的关注焦点当中,这主要是由于W3C委员会终于认定当下已经是停止推动HTML 5.0规范、转而向HTML 5.1迈进的最佳时机。这标志着一个历史性的时刻,因为HTML 4文档早在1997年就已经彻底定稿。而就在委员会搞东搞西的同时,十几年转瞬不再。

那么现实世界在此期间到底在干些什么?当然不会被动等待最终草案的发布。使用HTML 5标准的网站如今已经随处可见。各类浏览器方案目前已经能够支持多种HTML 5功能,而且它们在每一次升级之后都带来更出色的表现。就目前来看,网站与原生应用程序之间的差异已经不再像过去那样突出,而复杂且具备出色交互效果的网站已经比以往更接近原生应用程序。

现在正是我们重新审视各款浏览器方案,并探索其对于HTML 5标准委员会建议的支持效果的最佳时机。新的表单元素、标签、属性以及背景功能如果仅仅被作为理论层面的技术成果,那么其根本无法为现实世界做出任何贡献。各浏览器正是委员会实现梦想的立足平台,而且我们在编写代码或者访问网站时的体验就是梦想的终点——现实。

好消息是,各浏览器方案都将标准机制引入自身。在由HTML5Test.com提供的自动计分表当中,尽管不同浏览器之间仍然存在着一定差异,但其彼此仍然相当接近而且与完美相去不远。

值得注意的是,HTML5Test网站将所有标准合规项目汇总成一个数字(从0到555),从而保证大家易于阅读、易于比较且不至于被大量细节信息分散了心神。这些自动测试方案只会通过创建部分DOM对象来检测指定功能是否得到支持。它无法告诉大家该功能是否在正确、精巧或者不导致任何恶性bug的前提下得到了实现。更糟糕的是,每个人都可能对其中的特定(或者全部)功能评分数字产生质疑。

单独一个数字当然非常醒目,不过要想真正得出答案、我们还得再深入挖掘一番。花几分钟对这份列表进行分析,我们就会发现各开发团队在编写该浏览器时所作出的优先取向。一部分新功能目前并非受到支持,这明显是因为开发团队认为其重要性实在有限。谷歌公司的Chrome浏览器支持自定义计划处理功能,但却不支持自定义内容处理功能。火狐浏览器不支持某些推出时间较晚的输入字段类型,例如时间、月或者周。每套平台都或多或少存在着上述问题,而且几乎没有哪款能够在目前的用户体验方面将其它竞争对手彻底甩开。不过我们能够断言的只有现在,相信在未来、合规将成为浏览器发展的坚实基础。

浏览器政治

这些差异往往源于隐藏在幕后的深刻政治及经济理由。火狐与Chrome支持WebM与Ogg Theora视频编解码器,但却不支持MPEG-4。Safari浏览器支持MPEG-4,但却不支持WebM或者Ogg Theora。不过它们至少还都支持H.264。这些编解码器并不属于HTML 5当中的正式组成部分,不过它们已经成为现代Web的核心基础,因此这些功能对于众多Web开发人员而言更为重要。

测试中的一部分项目甚至根本不属于HTML 5正式草案中的组成部分,因为它们只是其它可能已经被剥离出正式HTML 5规范的内容。Web开发人员、服务器程序员特别是用户现在往往很难分辨出哪些属于HTML 5,而哪些属于新的或者更佳功能。像Web Storage以及Web Workers等极具吸引力的功能并不从属于HTML 5规范,不过它们仍然受到了W3C的深深熏陶。它们甚至有可能已经具备更为可观的影响力。

HTML 5规范的核心完成了一系列额外新型标签的设计,旨在通过标签内的文本信息表达角色类型。它们将指定多种范畴,包括章节、旁白、页脚以及页眉。回想过去,我们会利用标签对其进行标注、从而指定其字体,例如<h3>。如今HTML 5将利用其角色进行标记,如此一来它们就能拥有自己的CSS样式,而浏览器也将据此对各元素进行布局。总而言之,将文本与图像从排列当中加以分享并将其显示在页面中继续成为主要趋势。

在这些变更背后存在着激烈的争论,但它们的重要性仅仅会影响到那些关心网页显示效果的相关人士。举例来说,有一部分技术人员想要彻底消除布局中的表,而另一些人则单纯只想将其禁用。通过阅读属性内容,我们往往能够凭直觉了解表标签的实际使用方式。添加边框或者为某列增加页眉意味着其可能包含有表格数据。而保持边框关闭则意味着其可能属于一套布局。

除了冒犯到那些自封的网络卫道士之外,以“错误的方式”使用这些元素还可能产生其它后果。即使精巧地对标签进行再利用(类似于表),其它系统仍然有可能因此受到影响。HTML 5开发团队目前正投入更多资源,希望让盲人与残疾人士更轻松地使用Web内容。将表标签用于数据表之外的任何其它项目都会令屏幕读取器及其它机制受到干扰。如今,新的属性类已经出现——以缩写词ARIA(即Accessible Rich Internet Applications,即可访问富互联网应用)为起始——旨在带来数据内部描述的替代性方案。总体而言,将消息从显示内容当中分离出来有助于降低这方面工作的难度。

从Web页面到Web应用程序

近来一种很好的现象就是静态页面开始逐步转化为全动态应用程序。Web Storage、WebSockets以及Web Workers的规范已经随着浏览器构建者们的具体实践,了解哪些能够起效、哪些不能起效而逐渐丰富起来。这些规范能够帮助程序员们创建出具备完整功能的软件套件,其中最典型的代表就是Google Docs。将数据保存在本地,允许后台通信及分线程处理已经成为处理特殊数据集的基本方式。

这些变化在很大程度上专注于细节层面,而这些细节甚至根本得不到开发人员的关注。举例来说,Web Workers的规范如今已经明确指定,worker可以独立并行创建自己的执行环境。这一点只面向那些时间紧迫的worker,因此大部分基础性worker根本不会因此受到影响。

Web Storage当中也存在着数十项类似的小变化,当然与之相关的争论也是此起彼伏、甚至恐怕会永无休止。有些人认为强迫多个不同线程利用互斥位访问Web Storage会带来大量额外资源开销。但也有人坚信数据完整性的重要性不容忽视,因为人们常常会在多个标签当中浏览同一个网站。

以上提到的都是W3C在实际工作中进行过的讨论内容,但程序员们可能对此并不关心。如果用户们只需要存储数千个项目,那么性能表现应该还算不错,此类规范中的诸多细节也不会对其产生什么影响。但从浏览器开发人员的角度来看,这一切则必须被纳入议事日程。

由于大量此类细节仍无法确定,浏览器开发人员们通常会就此做出不同抉择。Web Storage规范中指出,浏览器应当“限制存储区所用空间的最大数量”,同时建议以5MB作为最佳限制数字。浏览器以及用户未来受到此类细节设定的显著影响。与此同时,其实现方式也将有所区别。

其中最具争议的问题可能出现在媒体处理领域。网络浏览器如今正逐渐成为访问视频的主导性方式,而HTML规范团队显然已经下决心占领用户的起居室。加密媒体扩展规范包括一套复杂的视频来源及密钥处理机制,因此只有受到对应许可的浏览器才有能够显示其图像。Chrome、Opera以及Safari都能够支持上述媒体扩展内容,而火狐与IE则不行。

另有大量工作旨在创建活动组件。作为一项新提案,Web Video Text Tracks(即网络视频文本追踪)希望构建一套标准化机制,用于将视频内容与网站中的其它组成部分进行同步。其主要面向字幕内容,但是我们同样能够在更多应用程序当中找到以此为基础实现的多媒体表现方式。我能够看到文字、图形与图像四处飞舞,而且所有浏览器都将支持这种效果。

Web功能

尽管很多人会顺其自然地认为HTML 5规范终于迎来了尘埃落定之期,但我们最好还是将其视为下一发展阶段的新起点。有些人对于5.0规范仍然不太认同,他们觉得其还缺乏充分的“实现经验”。换句话来说,各项功能还不够成熟,不足以明确帮助用户了解哪些功能可以实现而哪些不能。

作为现有草案条款的组成部分,大家可以点击此处快速阅读HTML 5.1规范,其中包括诸如用于将键盘操作以等同于鼠标点击的方式进行添加的accesskey属性。所有浏览器都在HTML Editing API的支持能力方面有所提升,旨在让每个网络页面都拥有可编辑性、从而使整个网络变成一个大规模的维基百科。

更多规模更大的变化与调整也可能即将到来,因为有些人希望HTML能够更类似于XML。这不只是希望鼓励大家关闭全部那些已经打开的标签——这会导致一部分开发人员遭遇bug,并且已经受到解析器团队的关注。一部分HTML 5规范的贡献者们正在讨论将“可hack能力”添加到下个版本当中。具体而言,他们希望这套规范能够允许大家定义属于自己的标签,并在解析工作完成后利用属于自己的机制对这些标签进行处理。

这能够极大提高标记机制的潜在执行效率。任何最近曾经点击过“查看源代码”按钮的朋友都会发现,如今的大部分HTML文件当中、50%到60%的内容都由<div>以及<span>标签构成,这两者各自附带着多种不同的类。对CSS样式文件进行调试的难度正变得越来越高。要想解决这个问题,方法之一在于使用一套具备完全可扩展能力的标签系统。

这一切决议都将在未来变成现实并带来巨大影响。HTML 5.0已经足以称为一次里程碑式的事件,但它还仅仅是这场关于如何我们如何表达信息并与之交互的标准演进中的道标之一。

对于世代更替的话题已经聊了不少——现在让我们正式进入浏览器比拼环节。

#p#

浏览器一号:谷歌Chrome

Chrome在HTML5Text当中的得分可谓无人能敌——Chrome 42的得分为523分——而这也再次证明了谷歌公司确实在积极推动HTML 5规范的建立、并据此打造出最顶尖的浏览器方案之一。编程团队只需要对仅有的几个对话框进行标记,并直接将测试得分记录下来。

遗漏内容以分布方式汇聚成图,但我们发现很难用一句话对其进行简单概括。大家会发现,其中零零散散地存在着缺失标记元素以及未实现图形方法。总而言之,Chrome对于任何一位希望利用一整套广泛工具集构建用户界面的开发者来说都是梦幻般的选择。如果大家希望使用全部新型标记或者表单元素,那么Chrome将是你最好的选择。在这份评测结果中,Chrome几乎没留下什么明显的短板。

不过从深层角度来看,Chrome仍然存在着一些较为严重的缺失。Chrome当中不具备针对JavaScript引擎、用于在脚本开始及停止执行时触发个别事件的钩子。此外,我们也找不到某种简便方式来利用scope控制CSS样式对于页面效果的具体影响。再有,大家无法将自己的代码注册为一项功能,从而利用其处理全部特定MIME类型数据或者URL计划——而这正是我们之前提到过的自定义内容处理功能。

顺带一提,这三项在火狐浏览器当中全部得到了良好实现。看来谷歌公司的开发团队似乎没能抓住这些重点。

另一个可能引发问题的根源在于编解码器及媒体格式的支持能力。以MPEG-4为例,其能够与iOS浏览器协作正常,但在Chrome上却无法实现。苹果与微软双方都支持音频轨道选择,而且苹果还支持视频轨道选择,但Chrome却不允许用户完成这些高级操作。

总体而言,Chrome对于那些希望尝试新标准内各项附加功能的用户而言绝对算是非常理想的选项。

浏览器二号:Opera

截至撰写本文时,Opera在HTML5Test测试当中的得分排名第二,不过其实际得分只有四项,Opera 29的成绩为519分。与Chrome类似,Opera也针对新型标记以及表单元素提供广泛支持,因此它与Chrome一样、都是有意对此进行实验的用户们的理想选择。

但与Chrome的另一项共同点在于,Opera也直接跳过了自定义内容处理功能、scoped样式元素以及脚本执行事件。不过平心而论,除了火狐之外其它浏览器对这些都没有给予关注。

最大的差异点出现在编解码领域,Opera无法支持MPEG-4以及H.264视频格式。而更令人头痛的是,Opera还缺少对AAC以及MP3的支持能力——这两类格式在各种网站上几乎随处可见。因此,要让自己的多媒体内容在Opera浏览器上顺利起效可绝不是件易事。Opera几乎肯定是受到了专利授权费用的恐怖压迫,因此该公司可能选择直接忽略掉那些许可费过高的技术方案。Opera能够支持Ogg Vorbis、Ogg Theora以及WebM,这还算为其挽回了一些颜面——即使无法直接实现兼容。

与IE及Chrome一样,Opera也在“指针事件”领域走在了时代的前列——这是一种对于差异性输入模式的积极探索。所谓“指针事件”,旨在使浏览器更轻松地支持鼠标、触控屏幕,并通过为程序员提供单一、更简洁的事件模式对相关内容进行编排,从而为指针赋予更为丰富的能力。

总体而言,Opera是一款令人印象深刻的浏览器,但却没能得到应有的重视。从现代Web功能支持能力的广泛性角度看,它仅次于Chrome处于领先位置。

浏览器三号:Mozilla火狐

从数字角度来看,火狐与前两位领先者相比似乎稍逊一筹。其火狐37在HTML5Test中的得分为449分,但这实际上很大程度受到了测试在对各项功能进行测试时所带来的性能压力的影响。火狐浏览器在其欠缺的项目当中推动了大量分数,而在相对领先的项目中得分也不太高。

举例来说,大部分失分项的出现是由于火狐浏览器并不能实现多数新型输入字段与交互式元素。如果大家希望单纯将一个表单元素添加到收集数据或者时间值当中,火狐浏览器将对此表示无能为力。在缺失项目方面,火狐丢掉了26分,但目前尚不清楚程序员是否会真正受到这些问题的影响。火狐浏览器当中还提供丰富的JavaScript库用于接收时间数据,而且其在设计思路上引入了跨浏览器兼容性考量。其中大部分拥有突出的新式设计,而且比其它常见工具更加美观。因此,多数程序员都会选择这些库资源、而非直接使用内置支持机制。

窗体底端

在那些火狐取得领先的项目当中,测试给出的分数也并不足以带来显著优势。在脚本即将执行的时候触发事件对于处理负载工作非常重要,但对这些脚本执行事件的运行能力仅给火狐浏览器带来了可怜的1分增项。将scope添加到样式表当中对于将多种样式表加以整合非常关键,但在HTML5Text的测试人员眼中、这种能力也只值2分。

火狐浏览器在实现微数据标记方面没能夺得任何最高分。这里要解释一句,所谓微数据标记,是指那些能够简化浏览器识别并标注来自网络页面的某些常见数据类型的额外标签。由于W3C以及其它所有浏览器都不待见微数据机制,因此在这方面只有火狐为其提供了支持。

在编解码方面,火狐浏览器能够广泛的支持能力,不过单单回避了MPEG-4,这使其与Chrome及Opera被划入了同一阵营。火狐浏览器支持Ogg、WebM以及H.264,单是这些已经绰绰有余了。

那些这些差异是否重要?最终答案要取决于大家个人对于不同功能的实际需求。如果各位喜爱并有必要拥有全部新型表单元素,那么火狐浏览器显然不是您以及您的项目的最佳选择。不过在多数情况下,火狐都能提供与其它高分浏览器相等同的新规范支持能力——只要大家不在乎那些新的时间输入表单字段。

浏览器四号:苹果Safari

在HTML5Test测试当中,Safari 8获得了396分——不过这里要提醒大家,其在实际使用角度的差距绝没有分数上看起来那么夸张。与火狐类似,Safari浏览器同样由于无法实现全部表单与标记元素而被扣掉大量分数。Safari不提供利用输入字段来收集时间或者颜色的选项,也不支持各类标准菜单元素。

不过游戏开发人员可能会对Safari更不满意。Safari浏览器不支持对于设备的定位或者运行状态的追踪功能,也无法通过游戏手柄进行控制或者更为通行的指针事件。如果大家打算为Safari浏览器开发应用产品,那么最理想的办法就是继续固守传统内容、并尽量避免使用那些交互程度太高的元素。没错,把这些留给App Store处理吧。

在编解码方面,苹果选择了与Chrome以及火狐完全不同的发展道路。Safari浏览器能够显示MPEG-4与H.264视频内容,但却将WebM与Ogg Theora拒之门外。好消息是,Safari能够通过JavaScript实现对视频及音频轨道的控制能力。

Safari浏览器在其它功能集合的完整性方面与Chrome、Opera以及火狐相比亦存在着些许不足。这些浏览器都能够通过WebRTC支持点对点通信机制,相比之下苹果并未提供此类支持,这就迫使不少用户继续固守IE。除外,Safari也不支持用于后台处理的service worker、自定义计划或者内容处理功能,亦不具备自定义搜索提供功能。

必须承认,我们无法对如此众多的功能缺失视而不见。不过苹果仍然提供了比较广泛的HTML 5标准支持机制,并带来大量非常有趣的独特功能。

浏览器五号:微软IE

曾经拥有顽强市场表现的微软IE浏览器版本11在HTML5Test当中获得了最低得分——只有348分——但这应该已经在大家的意料当中。相关标准变动的背后一直受到鼓励竞争这一核心思路的引导,而微软凭借着其.Net所建立起的垄断机制正是新标准希望打击的对象。总而言之,这样糟糕的结果与很多人的预期完全相符。

IE的丢分点在整套图表当中比比皆是,我们甚至很难找到哪里才是其最突出的短板。事实上,IE惟一一个能够击败其它主流浏览器对手的领域在于Web应用程序,因为其能够支持自定义搜索提供功能——与Safari非常接近。除此之外,IE一直都稳稳居于测试榜的末尾。

虽然通过这些较低的得分来将IE在实现HTML 5标准内各项内容方面的表现划入糟糕评级并无不公之处,但单凭这一点我们仍不足以断言IE在运行HTML 5代码或者执行日常事务时的实际效果。通过对测试结果的快速浏览,我们发现其中大部分丢分项都集中在新型功能缺失方面——而非基础性功能。举例来说,IE由于不支持“in-range”、“out-of-range”以及“read-only”等CSS选择器而丢分。此外,IE浏览器还缺少对于多种用于时间处理的新型输入字段的支持能力。

虽然从结果来看,IE存在着数十项面向小型或者附加功能的支持能力缺失,但这些对于我个人而言并不重要。诚然,它们会给一部分希望加以使用的程序员造成困扰,不过这并不足以妨碍IE成为一款运行效果良好的浏览器产品。

但严重的疏忽也依然存在。微软公司没有将MPEG-4、Ogg以及WebM视频支持能力引入IE,同时缺失的还有PCM、Ogg以及WebM音频支持能力。目前IE能够直接处理的仅有MP3音频、H.264视频以及Flash视频这三种网络通行标准。不过IE允许JavaScript对音频轨道进行控制。

值得注意的是,微软公司显然意识到了标准合规水平的重要意义,因此IE一直处于快速成长的过程当中。尽管IE浏览器的版本号不像其它竞争对手那样高得令人吃惊,但就在不久之前IE 9才仅仅取得113分的HTML5Test测试成绩,而如今IE 11已经获得348分。除此之外,目前Spartan项目——即Windows 10技术预览版内提供的全新网络浏览器——的出炉意味着其发展速度仍在不断加快。

Spartan的最新版本(其伴随着Windows build 10061一同亮相)在HTML5Test当中获得了390分,比IE 11更出色而且只稍逊于Safari。IE浏览器当中的各项重大改进——包括支持设备定位、设备运行、游戏手柄控制、网络音频、数字版权管理、媒体扩展以及响应式图像显示等——似乎表明,游戏、娱乐以及移动设备已经成为微软公司待办清单中的优先事务。

HTML5Test是一套非常精确的衡量指标,但更重要的是、我们要记住其建立目标是评估浏览器是否能够实现HTML 5委员会所接纳的那些最新、最具实验性的功能。它并不会为浏览器在进行表布局或者页面渲染时表现出的优异速度水平而给出高分。HTML5Test仅仅是一项规模庞大的功能检查方案,而绝不是浏览器质量评估工具。

HTML5Test给出的测试结果也成为企业在选择浏览器时非常值得参考的优先级评判标准。不出所料,Chrome对于功能完备、极具应用程序风格且由谷歌公司提供的网站拥有极佳的支持效果。这也保证其能够更轻松地将更多功能引入谷歌公司的硬件平台,即Chromebook。谷歌这家技术巨头在“操作系统”业务领域所获得的盈利数字非常有限,也无怪乎他们希望能够为“浏览器”赋予更为可观的能力与发展空间。

而从自身角度来看,苹果公司似乎对于在浏览器当中支持游戏类功能并不感兴趣,这也许是因为他们从App Store身上已经赚得盆满钵满、完全没有必要在让浏览器破坏这一良性业务走势。

在此次测试中,大部分与得分相关的浏览器支持功能其实并不会给开发人员带来什么影响。如果大家打算利用一大堆DOM元素来生成AJAX调用、回应服务器的响应并由此构建起Web应用程序,那么前面提到的所有浏览器都能很好地完成这项任务。它们都提供同样的核心功能,而且到底能不能实现各种最新表单元素对于上述用例而言根本毫无影响。

在这种意义上看,HTML5Text得分的关注重点显然更倾向于未来而非现在。尽管HTML 5.0标准目前已经固定下来,而且其委员会已经开始将注意力转向下一套规范,但各大浏览器开发商们仍然需要完成对这套标准的实现工作。在他们着手进行的同时,将有越来越多的Web开发人员见证此类新功能的出现并将其引入自己的开发成果当中。只有到那个时候,用户们才会真正感受到新标准所带来的收益。

好消息是,浏览器开发商们的行动相当迅速,而且目前所提供的大部分功能已经足以支持Web开发人员的实际需要。总而言之,HTML 5委员会方面的工作已经完成,接下来该轮到我们上场了。

 

 

责任编辑:chenqingxiang 来源: 51CTO
相关推荐

2013-10-28 15:46:04

Chrome浏览器

2010-02-06 09:27:17

Opera 10.5

2009-03-07 09:56:01

2013-10-30 17:23:01

Chrome浏览器

2010-01-28 09:22:24

浏览器速度测试

2010-03-26 09:15:14

2010-03-25 12:51:13

2009-09-17 09:50:57

Chrome3.0谷歌浏览器

2009-12-03 10:55:26

IE火狐Chrome

2012-05-24 11:03:55

HTML5

2009-04-24 09:08:24

2010-03-06 08:52:17

2013-03-15 10:51:37

ChromeIE10浏览器

2012-03-22 10:29:02

2012-06-13 14:19:27

2010-04-16 16:35:31

2013-06-24 09:28:40

2010-01-07 09:11:42

IE市场份额

2009-03-15 09:58:35

IE8FireFox3.1Chrome

2013-03-05 13:11:08

点赞
收藏

51CTO技术栈公众号