各大主流浏览器对HTML5的兼容性测试及结果分析

时间：2022-05-29 18:30:01 | 来源：网络营销

时间：2022-05-29 18:30:01 来源：网络营销

随着HTML5技术的普及和推广，Web开发社区逐渐开始尝试在RIA（富互联网应用，具有高度互动性、丰富用户体验以及功能强大的客户端）中使用HTML5，这种实践主要优势在于开发人员能够通过HTML5的各种技术以一种前所未有的统一、简洁、无插件依赖的方式实现炫目、复杂的Web应用，目前来说，HTML5的优越性已经得到了广大开发人员的普遍认可。

不过，就像其他Web技术诞生时的情况一样，作为新生儿的HTML5在各种Web浏览器中的实现程度或者说平台兼容性一直是Web开发人员的心病。Web开发人员在尝试采用HTML5技术时，一方面会为其强大的表现力而激动，另一方面也会因为各浏览器的兼容性测试而烦恼，对于其发展趋势我也曾在亿企邦的《预测HTML5的10大发展趋势》一文中做过详细的介绍。

自从2006年WHATWG和W3C决定合作制定HTML5标准以来（预计2012年成为候选标准），浏览器厂商都不甘落后，一直在努力实现更多的HTML5技术，不过由于各个厂商的步伐不一，导致HTML5在浏览器中的实现程度参差不齐。在亿企邦的平台上我将综合两种HTML5兼容性测试工具包HTML5Test和Modernizr的测试结果来分析一下Web浏览器的支持程度，希望能够帮助Web开发人员在应用HTML5技术时充分考虑到平台差异性。

一、浏览器的选取

由于目前市面上的浏览器品牌和版本繁多，我们难以覆盖全部产品，因此在这里设定测试浏览器的选择原则为：主流品牌、主流版本和最新版本（正式发布）。依据数据中心发布的2014年5月份浏览器市场占有率统计分布情况，主流品牌如下图所示：


主流浏览器分布图

从图中可以看出，微软的Internet Explorer以其混搭的IE6、IE7、IE8、IE9等多个版本仍占据了榜首（具体可查看亿企邦的《如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题》相关介绍），360浏览器紧随其后，不过360浏览器的内核的使用ie浏览器的，这其中我们还要特别注意一下火狐和Google主推的Chrome的浏览器，虽说在内内的占有率不是很高，但在国际上的份额也是不容忽视的，尤其是火狐浏览器，其开放的体系结构也吸引了众多优秀插件，并成为Web开发人员的主要开发调试平台。

二、HTML5兼容性分析

考虑到HTML5标准的制定原则：新特性基于HTML、CSS、DOM以及JavaScript，减少对外部插件的需求（比如Flash），独立于设备等，在此，亿企邦选取了HTML5的以下5个主要特性来评价浏览器系统。

1、视频播放标记video

在HTML5技术出现之前，大部分Web视频播放是通过浏览器插件如Adobe Flash来实现，这要求客户在观看视频之前安装相应的组件。video标记的出现使开发人员不再依赖于特定第三方技术，如下面的这段代码片段播放了一个视频文件，设定了画面的尺寸，并带有控制按钮（暂停/进度条等）：

video元素潜在地支持多种视频格式，包括：

（1）、Ogg——采用Theora视频编码和Vorbis音频编码的Ogg视频文件；

（2）、MPEG4——采用H.264视频编码和AAC音频编码的MPEG 4视频文件；

（3）、WebM——采用VP8视频编码和Vorbis音频编码的WebM视频文件。

这些视频格式在HTML5最终标准的接纳程度目前还在各方博弈之中，不过浏览器已经开始选择性地支持Video标记了。

通过亿企邦对其兼容性测试，其结果如下所示：


视频标记video测试结果

这里，亿企邦要提醒大家有几点需要注意：

（1）、ie浏览器的IE9版本默认只支持MP EG4（H.264编码）格式文件（支持硬件加速），如果安装了WebM/VP8插件，可以支持WebM视频格式。

（2）、Safari浏览器依靠QuickTime做视频播放，所以Safari支持的视频格式与QuickTime一致。请注意：QuickTime在Mac机上是预装的，其默认支持的视频格式是MPEG4，但在Windows系统上QuickTime需要手动安装，也就是说在Windows上默认情况下Safari是不支持所有视频格式的，这一点需要Web开发人员了解。

（3）、Firefox 4.0还将支持WebM格式。

（4）、Chrome已经宣布不再支持MPEG格式的视频。

（5）、Video元素有一个preload属性，可能的值包括：

①、Auto——当页面加载后载入整个视频；

②、Meta——当页面加载后只载入元数据；

③、None——当页面加载后不载入视频。

Web开发人员应该根据网页的实际环境来选择合适的预加载属性以达到较好的前端性能，具体可通过亿企邦的《深入解析HTML5的8大性能》相关介绍来详细的了解，在此，我就不多说了。

2、音频播放标记audio

与视频标记vidio类似，音频播放标记audio也是HTML5标准引入的元素，如下面的代码播放了一段音频，带有控制按钮：

audio潜在地支持多种音频格式，包括Oggvorbis、MP3、AAC、wav等，不同浏览器对audio标记的支持程度如下图所示：


音频标记audio测试结果

这里，亿企邦要提醒大家有几点需要说明一下：

（1）、因为存在包含关系，所以音频标记auido的情况基本与video的结果保持一致；

（2）、IE8对video和audio标记都不支持，IE9刚刚引入这些元素；

（3）、audio元素同样具有preload属性，注意正确设置属性值。

3、绘图标记canvas

在Web 2.0的世界里，炫目的图形是必不可少的组成部分。HTML5引入的canvas元素支持Web开发人员通过JavaScript在页面上绘制线条、图形、添加文字和图像等。如下面的这段代码片段在页面上简单绘制了一个蓝色矩形：

通过亿企邦对其兼容性测试，其结果如下所示：


绘图标记canvas测试结果

我们可以看到，各种浏览器对canvas的支持度非常高，对于IE8的限制，可以通过开源项目ExplorerCanvas来解决，只需要两步操作：

（1）、包含js文件

（2）、直接包含canvas元素或者动态创建它：

4、Form 2.0表单元素

对于企业级Web应用来说，表单控件是最重要的页面元素之一。在HTML5之前，各种类型的表单只能由开发人员通过复杂的属性设置和限制条件（通过脚本计算）来完成（具体可查看亿企邦的《解析HTML5页面元素的嵌套规则及引起的错误问题》相关介绍）。

制定中的HTML5标准引入了一系列分类清晰、功能完善的表单控件标记，包括email、url、number、range、search、color等，还有表单属性autocomplete、autofocus等。这里提供一个简单例子，用户填写电子邮箱（自动检测格式正确与否）和个人主页（自动检测格式正确与否）等，然后提交给后台系统：

由于HTML5引入的表单控件、属性比较多，这里选取了部分进行了测试，如下表所示：


部分表单元素测试结果

这里，亿企邦要提醒大家有几点需要说明一下：

（1）、Firefox 4.0将开始支持email、url等表单元素；

（2）、自动填充已经作为许多浏览器的一项基本功能存在，与HTML 5标准的autocomplete属性需要区别开。

5、本地客户端存储

Web开发人员经常通过cookie管理客户信息，但是当数据量比较大时，这种方法相对低效，一方面是因为cookie存在大小限制，另一方面每次都通过网络请求来传递。HTML5引入两种新的存储方式：

（1）、localStorage——没有时间限制的数据存储。

（2）、sessionStorage——针对session的数据存储。

下面的例子分别使用LocalStorage和SessionStorge实现了简单计数器，结果下表所示：


本地客户单存储测试结果

这项功能对Web开发人员来说非常强大，我们来看一下浏览器对sessionStorage和所有测试的浏览器都实现了 HTML5的本地客户端存储标记！

不过，这里要提一下安全性，Web开发人员在使用这些元素时，要时刻谨记存储在客户端的数据可能会被授权使用浏览器的其他人查看甚至修改，所以需要注意保存敏感信息。

亿企邦点评：

可以说，HTML5是下一代Web语言，它不单单是一种标记语言，更为下一代Web提供了全新功能，并将引领下一代Web实现类似桌面的应用体验。

据说HTML5会带来一个统一的网络，无论是笔记本，台式机，还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候，开发者需要重新考虑用户体验，网站浏览，网站结构等因素使得这个网站对任何硬件设备都通用。