浏览器对HTML5的兼容性分析

随着HTML5技术的普及和推广，Web开发社区逐渐开始尝试在RIA（富互联网应用）中使用HTML5，这种实践主要优势在于开发人员能够通过HTML5的各种技术以一种前所未有的统一、简洁、无插件依赖的方式实现炫目、复杂的Web应用，HTML5的优越性已经得到了开发社区的普遍认可。不过，就像其他Web技术诞生时的情况一样，作为新生儿的HTML5在各种Web浏览器中的实现程度或者说平台兼容性一直是Web开发人员的心病。本文将介绍Web浏览器对HTML5技术的兼容性，希望能够帮助Web开发人员在应用HTML5技术时充分考虑到平台差异性。

从2006年WHATWG和W3C决定合作制定HTML5标准以来（预计2012年成为候选标准），浏览器厂商都不甘落后，一直在努力实现更多的HTML5技术，不过由于各个厂商的步伐不一，导致HTML5在浏览器中的实现程度参差不齐。在这里我们将综合两种HTML5兼容性测试工具包HTML5Test和Modernizr的测试结果来分析一下Web浏览器的支持程度。

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

  • 视频播放标记video
  • 音频播放标记audio
  • 绘图标记canvas
  • 表单控件标记url、email等
  • 本地客户端存储

浏览器（版本）选取

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

从图1 中可以看出， 微软的I n t e r n e tExplorer以其混搭的IE6、IE7、IE8、IE9等多个版本占据了榜首，开源浏览器Firefox紧随其后，其开放的体系结构也吸引了众多优秀插件，并成为Web开发人员的主要开发调试平台。Google主推的Chrome后来居上，占据了第三名的位置。

浏览器主流版本分布情况如图2所示。

图2 浏览器主流版本分布图

再加上部分最新浏览器版本，我们选取的全部浏览器（版本）如表1所示。

表1 测试浏览器

HTML5兼容性分析

视频播放标记video

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

 1 <!DOCTYPE HTML>
 2  <html>
 3  <body>
 4 
 5  <video width="320" height="240" controls="controls">
 6   <source src="movie.ogg" type="video/ogg" />
 7    <source src="movie.mp4" type="video/mp4" />
 8    <source src="movie.webm" type="video/webm" />
 9  Your browser does not support the video tag.
10  </video>
11  
12  </body>
13 </html>

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

  • Ogg——采用Theora视频编码和Vorbis音频编码的Ogg视频文件；
  • MPEG4——采用H.264视频编码和AAC音频编码的MPEG 4视频文件；
  • WebM——采用VP8视频编码和Vorbis音频编码的WebM视频文件

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

表2 视频标记video测试结果

这里有几点需要注意：

  1. 最新发布的IE9默认只支持MPEG4（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开发人员应该根据网页的实际环境来选择合适的预加载属性以达到较好的前端性能。

音频播放标记audio

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

1 <audio controls="controls">
2   <source src="song.ogg" type="audio/ogg" />
3   <source src="song.mp3" type="audio/mpeg" />
4 Your browser does not support the audio element.
5 </audio>

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

表3 音频标记audio测试结果

有几点需要说明：

  1. 因为存在包含关系，所以音频标记auido的情况基本与video的结果保持一致；
  2. IE8对video和audio标记都不支持，IE9刚刚引入这些元素；
  3. audio元素同样具有preload属性，注意正确设置属性值。

绘图标记canvas

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

1 <canvas id="myCanvas" width="200" height="100"></canvas>
2 
3 <script type="text/javascript">
4 var c=document.getElementById("myCanvas");
5 var cxt=c.getContext("2d");
6 cxt.fillStyle="#0000FF";
7 cxt.fillRect(0,0,150,75);
8 </script>

Canvas的测试结果如表4所示。

表4 绘图标记canvas测试结果

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

包含js文件

<head><!--[if IE]><script src="excanvas.js"></script><![endif]--></head>

直接包含canvas元素或者动态创建它：

1 var el=document.createElement('canvas');
2 G_vmlCanvasManager.initElement(el);
3 var ctx=el.getContext('2d');

Form 2.0表单元素

对于企业级Web应用来说，表单控件是最重要的页面元素之一。在HTML 5之前，各种类型的表单只能由开发人员通过复杂的属性设置和限制条件（通过脚本计算）来完成。制定中的HTML 5标准引入了一系列分类清晰、功能完善的表单控件标记，包括email、url、number、range、search、color等，还有表单属性autocomplete、autofocus等。这里提供一个简单例子，用户填写电子邮箱（自动检测格式正确与否）和个人主页（自动检测格式正确与否）等，然后提交给后台系统：

1 <form action="form_action.asp">
2 First name: <input type="text" name="fname" value="Mickey" /><br />
3 Last name:<input type="text" name="lname" value="Mouse" /><br />
4 <input type="submit" value="Submit" />
5 </form>

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

表5 部分表单元素测试结果

几点说明：

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

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

本地客户端存储

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

localStorage——没有时间限制的数据存储

sessionStorage——针对session的数据存储

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 
 5 <script type="text/javascript">
 6 
 7 if (sessionStorage.pagecount)
 8     {
 9     sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
10     }
11 else
12     {
13     sessionStorage.pagecount=1;
14     }
15 document.write("这是session存储里的计数：" + sessionStorage.pagecount + "time(s) this session.重启浏览器，本次计数将清零");
16 if (localStorage.pagecount)
17   {
18   localStorage.pagecount=Number(localStorage.pagecount) +1;
19   }
20 else
21   {
22   localStorage.pagecount=1;
23   }
24 document.write("这是local存储里的计数："+ localStorage.pagecount + " time(s).重启浏览器，将继续计数");
25 
26 </script> 
27 
28 <p>Refresh the page to see the counter increase.</p>
29 
30 <p>Close the browser window, and try again, and the counter has been reset.</p>
31 </body>
32 </html>

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

表6 本地客户单存储测试结果

这项功能对Web开发人员来说非常强大，我们来看一下浏览器对sessionStorage和所有测试的浏览器都实现了HTML5的本地客户端存储标记！ 不过，这里要提一下安全性，Web开发人员在使用这些元素时，要时刻谨记存储在客户端的数据可能会被授权使用浏览器的其他人查看甚至修改，所以需要注意保存敏感信息。

结束语

本文介绍了一些主流浏览器对部分HTML5技术的兼容性，一言以蔽之——参差不齐，Web开发人员在尝试采用HTML5技术时，一方面会为其强大的表现力而激动，另一方面也会因为各浏览器的兼容性测试而烦恼，希望本文能够让大家对几个关键技术的支持程度有基本的了解。

参考文献
1. http://www.w3schools.com/html5/
2. http://www.html5test.com/results.html
3. https://github.com/NielsLeenheer/html5test
4. http://www.modernizr.com/
5. http://modernizr.github.com/Modernizr/test/index.html
6. http://gs.statcounter.com/
7. http://www.whatwg.org/specs/web-apps/currentwork/multipage/index.html#contents
8. http://diveintohtml5.org/
9. http://tools.google.com/dlpage/webmmf
10. http://excanvas.sourceforge.net/
11. http://msdn.microsoft.com/en-us/ie/ff468705.aspx

（本文来自《程序员》杂志11年04期，更多精彩内容敬请关注04期杂志）

posted @ 2011-04-01 16:43  郭培  阅读(1661)  评论(1)  编辑  收藏  举报