文档简介：

贴吧在进行HTML5技术应用的过程中，进行了一系列的技术调研；本文对HTML5的技术调研进行总结，尽可能客观的分析解答对HTML5技术的一些疑问，给出产品、技术上的一些决策建议。

对于文中的内容以及表述，也热切希望能得到大家进一步的指正和交流。

1. HTML5的发展现状及趋势

1.1 HTML5简介

HTML5是一套技术标准、规范，它定义了一系列的API编程接口和HTML规范（本文中将CSS3也默认涵盖到HTML5的技术范畴）；HTML5的运用和推广，需要依赖于各个浏览器厂商对HTML5的支持力度。

详细介绍请参看百度百科：

http://baike.baidu.com/view/951383.htm

 

1.2 HTML5规范的发展现状

HTML 5的第一份正式草案已于2008年1月22日公布。HTML5的正式规范还未发布，HTML5规范仍处于不断发展完善中，许多新技术特性仍在不断的补充到HTML5的规范里。

1.2.1 HTML5规范什么时候正式发布？

HTML5规范的正式版的发布时间还无法确定，也许2012，也许2014。但是很多浏览器厂商已经参考2008年的草案，不断的在各自浏览器中对HTML5进行支持了。

有一些新特性，也往往是先由某些浏览器创新实现的，然后才被收录到HTML5的工作小组收录到HTML5规范里。

也即是说，不需要等待HTML5规范的正式发布，现在就可以使用HTML5技术来丰富、优化产品功能和用户体验了。

HTML5官方规范文档：

http://www.w3.org/TR/html5/

随着HTML5在移动领域的兴起，通常将关于移动设备的本地设备访问的规范也纳入到HTML5规范的范畴里：

http://www.w3.org/2009/dap/

1.2.2 HTML5规范与HTML4有什么差别？

HTML5是在现有HTML4的规范基础上，去除一些不好的特性，补充一些新的东西（例如：本地存储、画布Canvas、视频、音频支持等）。

详细规范差异请参看文档：

http://www.w3.org/TR/html5-diff/

http://fe.baidu.com/doc/tieba/tech/share/html5/topic/语义化/html5_tag_diff.html

1.2.3 HTML5有什么优势？

HTML5的主要优势：加强了浏览器的能力，使web网页程序可以具备更强大的能力，可以支持很多传统web技术无法实现的功能。

详细请参考：

http://www.websbook.com/htmlcssdiv/HTML5dysyls_19043.html

1.3 HTML5的浏览器支持情况

1.3.1 现在可以使用HTML5了吗？

在PC桌面端，在国内，IE6/IE7/IE8浏览器仍占据约50%的市场占有率，它们不支持HTML5；其他浏览器（例如IE9、火狐、chrome、safari、opera等高级浏览器）则都已支持HTML5。

在无线端，android/iphone/webos/windowphone7等操作系统自带的浏览器都已支持大部分的HTML5特性。

总之，在无线端，已经可以在智能手机上较大范围的开始使用HTML5技术了；而在PC端，则HTML5的使用还很受限，只能差别式的利用HTML5技术（例如：使用高端浏览器的用户能够使用地理信息定位功能，而使用IE6浏览器的用户则无法使用）。

1.3.2 遨游、360等外壳浏览器支持HTML5吗？

对于搜狗、360、QQ、百度、遨游这5类浏览器，通常都已是双内核的浏览器：

在极速（或高速）内核（webkit内核）模式下，是支持HTML5的；而在普通内核（IE内核）模式下则不支持HTML5。

1.3.3 PC桌面端的主流浏览器对HTML5的支持情况

下表列出PC桌面端主流浏览器对HTML5的支持情况，数据取自HTML5权威网站http://html5test.com:

第1列代表浏览器名称，第2列代表浏览器版本，第3列代表得分（分数越高，表示对HTML5的支持情况更好；得分在100以下的，可以认为其不支持HTML5）。

从上图（取自2012年1月）可知：除了IE6/IE7/IE8之外的其他浏览器都已支持HTML5；但是国内大部分普通网民仍在使用IE6/IE7/IE8浏览器。

所以，在PC端，HTML5在国内的大范围推广，仍不是短期内可以实现的；然而在国外，IE6的市场占有率远低于10%，HTML5在国外的应用比国内迅猛很多。

浏览器PC端的市场占有率统计请参考：http://fe.baidu.com/~ua2

1.3.4 无线移动端的主流浏览器对HTML5的支持情况

在无线移动领域，各主流智能机的浏览器都对HTML5进行了广泛的支持。

塞班系统的智能机对HTML5支持很差，但android/iphone则对HTML5支持得很好；同时，在国内分别占据了10~20%市场占有率的第3方浏览器（QQ手机浏览器和UC手机浏览器）的最新版本，也都已经开始支持HTML5（老版本的QQ和UC不支持HTML5）。

下表列出无线移动端主流浏览器对HTML5的支持情况，数据（2012年1月）取自HTML5权威网站http://html5test.com:

1.4 HTML5的发展趋势

1.4.1 HTML5的技术发展趋势

HTML5技术目前在PC端发展迅猛，很多新特性新技术都是现在PC端涌现，然后发展到无线移动浏览器上。而反过来，无线移动设备上率先出现的一些特殊技术（例如操作各类传感器），也会反过来刺激桌面端浏览器的不断发展。

下表列出无线移动设备上的主流浏览器对HTML5技术的详细支持情况：

http://fe.baidu.com/doc/tieba/tech/research/webapp/htmt5supportlist.JPG

从上表可以看到，HTML5包含许多领域的一系列技术，绿色方块的代表浏览器已实现支持，红色方块代表浏览器未支持。

无线移动端的浏览器的HTML5得分，大多在300分以下，而对于PC端来说，大多数主流的新型浏览器的得分都已经在300分以上了。

特别指出，chorme浏览器16版，已经得分达到374分，目前只剩下访问摄像头和微数据（搜索引擎支持）两个特性未支持，其他HTML5特性都已经得到比较全面的支持。

也即是说：

首先，目前的HTML5规范范畴内的约80%（粗略估计）的技术，都已经得到PC桌面端浏览器的支持。

其次，由于移动互联网的兴起，一些与移动设备相关的规范也扩展到HTML5规范中，例如：手机通讯录、手机发短信、移动设备传感器、震动、铃声提醒等；这些规范仍在发展中，目前大多数移动设备相关的规范还未被移动浏览器实现（目前只有地理信息定位技术受到了较广泛的浏览器厂商支持）。

总之，移动领域会是未来1~2年HTML5技术发展的一个非常重要的方向。

HTML5关于移动设备的相关规范请查看：http://www.w3.org/2009/dap/

1.4.2 HTML5的浏览器市场普及趋势

在PC领域，HTML5的市场普及情况，主要依赖于新型浏览器的市场占有率，因为新型浏览器都已经支持或开始支持HTML5技术。

下表列出国内PC端浏览器市场分布的占比情况：

（上表数据取自CNZZ公开的统计数据：http://www.cnbeta.com/articles/168045.htm）

将支持HTML5的浏览器进行汇总统计（不包括IE6/IE7/IE8、360安全浏览器），目前用户PC上只有10%~20%的浏览器支持HTML5。

从目前的发展趋势来看，支持HTML5技术的浏览器PC端市场占比，预计在未来2年仍很难超过50%。因为国内约30%的用户仍在使用IE6浏览器（而在美国，只有1%的用户仍在使用IE6浏览器）；随着windows7的普及，大多数国内低端用户开始转向使用windows7操作系统自带的IE8浏览器，少部分用户开始使用最新的IE9浏览器。

在无线移动端，android手机（其手机自带浏览器支持HTML5）发展迅猛，且诺基亚转投windowPhone7，这几类智能手机（含ios,webOS系统的手机）的自带浏览器也都支持HTML5；可以认为，除了诺基亚的塞班系统的智能手机不支持HTML5，其他的绝大多数的智能手机都支持HTML5。可以预计，未来1~2年内，HTML5将在无线移动领域得到广泛的普及。

1.4.3 HTML5的产品应用的发展趋势

在PC端，目前已有部分网站开始采用部分的HTML5技术，例如新浪微博的图片浏览（canvas实现），网易邮箱的拖拽图片上传（HTML5的拖拽api）等。

进一步的介绍可以参看调研文档：http://fe.baidu.com/doc/tieba/tech/share/html5/topic/调研报告_业界html5应用.pptx

在PC端，目前通常只能通过差别式对待的方式来应用HTML5技术，从产品设计的角度，可以将更丰富的产品功能或特性，提供给使用高端新型浏览器的用户；对于使用低端浏览器的用户则提供一些退化的替代功能或特性。未来1~2年，HTML5的技术应用在PC端仍难得到较大范围的推广，因为要做到HTML5的浏览器差别式对待，是需要一定的技术开发、维护成本的。

在移动领域，HTML5的技术近期已经随着移动web app的发展，开始在android/ios智能移动设备（手机和平版电脑）上得到推广使用。例如：百度iphone地图map.baidu.com/mobile/（地理信息定位）、新浪微博m.weibo.cn（离线存储等）、app.ft.com（本地存储）等。

随着国内塞班系统的市场份额的持续下滑，预计未来1~2年，在90%（粗略估计）的智能手机上都可以运用HTML5技术，并出现更多web app形式的移动互联网产品。

关于移动web app，详情请查阅调研文档：

http://fe.baidu.com/doc/tieba/tech/research/webapp/贴吧web_app调研.docx

2 HTML5技术规范解析

2.1 已经发展较成熟的HTML5技术

HTML5规范中仍有一些技术规范还在不断补充完善，有一些规范则已经较趋于稳定；

下表列出那些技术规范已经制定得较为全面或者浏览器支持范围已经较广泛的技术：

序号名称移动浏览器支持技术复杂度备注
1SVG(可缩放矢量图形)中高 
2webapp cache(应用缓存)高低 
3Canvas(画布)高高 
4Layout Element高低 
5History(访问历史、导航)高中 
6Geolocation(定位)高中 
7Cross-document messaging(跨文档消息)中低 
8Session Storage(会话存储)高低 
9LocalStorage(本地存储)高低 
10Web SQL DB(本地SQL数据库)高中 
11加速度中低 

2.2 仍处于完善阶段的HTML5技术

序号名称技术复杂度移动浏览器支持备注
1Video(视频)中中 
2Audio(音频)中中 
3MathML(数学标记语言)低中 
4Form(表单)低中 
5Drag and drop(拖拽)中低 
6HTML editing(富文本)高低 
7Security

 

（安全iframe/seamless）

低中 
8WebGL(3D渲染)高低 
9Server-Sent Events(服务器端事件)中中涉及与服务器端配合
10WebSocket(网络套接字)高低涉及与服务器端配合
11IndexedDB(本地索引数据库)中低 
12Web/Share Workers(并行执行)中低 
13datalist,meter,progress元素低低等待浏览器支持

2.3 仍发展较缓慢的HTML5技术

下表列出那些技术规范制定较粗糙或浏览器支持仍较滞后的技术：

序号名称技术复杂度移动浏览器支持备注
1Microdata(微数据)低无提供搜索引擎优化
2Files(文件读写)中低涉及数据安全问题
3访问摄像头中低 
4web Notifications

 

(web桌面消息提醒)

低低 
5手机通讯录中无 
6收发短信中无 
7振铃、震动低无 

2.4 一些经常受关注的HTML5技术以及疑问

（1）       “声音播放”、“录音”、“语音识别为汉字”是3个不同的功能特性：目前HTML5支持声音播放，对于录音的支持还很缺乏，部分浏览器（例如chrome的pc版）支持语音识别为汉字进行输入。

（2）       HTML5支持视频播放，但还不支持视频录制（这个功能仍需等待），对于视频编辑功能，则更无法支持。

（3）       手机通讯录，目前有读取通讯录的HTML5规范，但是对于修改、编辑通讯录的API，则还未提供。还未有浏览器支持手机通讯录功能。

（4）       能否收发短信？

目前有发送短信的HTML5规范，但是仍未有浏览器支持。

当然，如果只是想发短信，可以不借助HTML5，而是考虑采用其他的间接手段来实现，例如利用服务器端程序来帮助转发短信。对于接收短信，目前HTML5规范里没有，也只能通过其他间接手段来实现。

（5）       能否读写本地文件？

HTML5规范中有较详细的读取文件的API规范，对于“写文件”的规范短期内还很难等到。由于安全和隐私的问题，浏览器的支持还很弱。利用javascript来编辑文件的内容，从编程角度看，是挺麻烦的一件事，尤其是处理二进制文件。

（6）       本地缓存能存多少内容？

对于移动设备，本地存储通常的存储空间是5~10MB；用web本地数据库时，可以存50MB左右；也有一些浏览器是不做阀值限制的。

（7）       可以访问摄像头吗？

HTML5规范有，可以调用摄像头进行拍照、摄像，但目前还没有浏览器可以支持。

（8）       可以在浏览器端裁剪、缩放、旋转、过滤图片吗？

可以，利用canvas来编辑图片。但目前还无法直接利用javascript来保存图片到浏览器本地，如果在编辑图片之后，未能成功上传图片到服务器端（例如：网络断了），则这张图片有一定的丢失风险。总体上来说，是技术可行的。

（9）       地理信息定位功能。

业界很多产品都已经有应用，不再重复细说。

（10）   是不是HTML5不支持某个特性，这个特性就肯定无法实现？

当然不是，还是具体问题具体分析比较合适。一些HTML5不支持的特性，也是有可能通过其它技术手段来间接实现的。

2.5 HTML5核心技术的调研和DEMO

请参看此处相关文档，对HTML5技术进行了较丰富全面的梳理：

http://fe.baidu.com/doc/tieba/tech/share/html5/

3 HTML5对PC前端技术的影响

3.1 HTML5的技术难度

HTML5的技术范畴很广，要全盘掌握是比较困难的事情。

有一些技术的API很多，文档很厚，例如Canvas绘图，可以做得很精很深，也可以简单快速跟进，迅速做出产品。

有一些技术的API很少，例如地理信息定位和加速器的API，总共只有不超过10个API函数，这一类HTML5技术就比较易于上手。

再例如webGL，做3D动画、游戏，它就可以非常复杂。

总之，快速的利用HTML5技术做出产品的原型DEMO，技术的难度倒不是太大；但是会比较繁琐，因为业界成功案例相对较少、遇到问题时可供参考的资料较少，通常需要技术人员摸索前进。

3.2 HTML5产品的开发、维护成本

HTML5的技术难度本身并不大，困扰技术人员的往往是HTML5的一些浏览器兼容性问题。

在PC端，往往需要针对不同浏览器，开发完全不同的两套代码，从而提供两套功能和服务给用户。

从产品的设计到产品的开发和维护，都需要额外增加不少投入，甚至是成倍的技术开发成本。

3.3 PC端使用HTML5，我们需要做出哪些改变

首先，需要前端技术人员来引导产品设计人员，将更多的新技术的信息传递给产品设计人员；

其次，需要前端技术人员自身自发的主动做技术革新和推进。因为只有前端技术人员自身才更清楚的知道HTML5到底能做什么。

最后，也是最重要的：“消灭IE6”。

4 HTML5对移动前端技术的影响

4.1 移动HTML5的技术难度

在移动领域，是HTML5最容易发力的领域，因为大多数的智能手机都支持HTML5。相比于PC端，移动领域需要面对更多的浏览器兼容性问题，这种兼容性问题主要集中在对各种手机上的不同浏览器，以及同一类型浏览器的不同版本上。

从技术难度来说，移动领域在下面几方面，是加大了的：

1浏览器种类繁多
2屏幕尺寸、大小
3横屏、竖屏浏览模式
4需要考虑节省网络流量
5各种类型的传感器
6减少复杂运算
7省电
8触屏操作优化（多点触控等）
9动画特效的性能优化

4.2 移动HTML5产品的开发、维护成本

移动前端的开发维护成本比传统的站点要复杂，尤其是后期的兼容性问题解决和展现调优，需要花费更多的成本：

1测试需覆盖更多类型的终端和浏览器版本。
2问题追查、复现困难
3网络环境复杂，追查问题的干扰因素大
4开发调试工具较简陋、调试困难
5遇到的浏览器兼容问题比较繁杂，往往业界无可供参考的资料

4.3 移动领域使用HTML5，我们需要做出哪些改变

在移动领域使用HTML5，由于技术还相对比较新，很多“坑”需要一个一个去试。

单纯的做技术调研，往往容易浮于表面，更好的方式还是只能在实践中去摸索。

而从移动web app来入手，就是一个很好的切入点。

关于移动web app的更多分析调研，请查看文档：

http://fe.baidu.com/doc/tieba/tech/research/webapp/贴吧web_app调研.docx

4.4 主流移动领域的web app开发框架简介

4.4.1 基础库

移动领域在业界常用的javascript基础库有jquery,zepto.js；对于dojo/YUI等，也都有相应的移动版本；百度有tangram mobile。

这些库，往往只提供一些基本的API，对于开发完成一个web app，则还需要做更多额外的工作才行。例如，在基础库之上，通常还可能需要这样的库或框架：MVC框架、UI组件库、前端模板引擎等。

Tangram mobile: http://fe.baidu.com/doc/ge/mobile/

Zepto.js(可能需要×××): http://zeptojs.com/

4.4.2 框架

移动领域有一些较为成熟且功能全面的框架，例如：jqtouch, jquery mobile, sencha touch。运用这些框架，往往可以方便、快速的搭建起一个web app应用，因为框架内部往往已经提供了很多UI组件、页面跳转控制、缓存策略的工具，甚至于集成了一些前端模板引擎和MVC框架。

主流移动框架的介绍：

Jqtouch: http://www.oschina.net/p/jqtouch

jquery mobile: http://jquerymobile.com/

sencha touch: http://baike.baidu.com/view/3800552.htm

前端模板引擎调研文档：

http://fe.baidu.com/doc/fis/template_front/front-template-research.text

MVC框架：

Backbone: http://documentcloud.github.com/backbone/

4.4.3 框架调研分析

调研文档：

zepto和jquery在手机上面执行效率对比：

http://fe.baidu.com/doc/tieba/tech/share/wise/zepto_VS_jquery.html

Sencha 与 jqurey mobile框架的简单对比分析：

http://fe.baidu.com/doc/tieba/tech/share/wise/sencha_vs_jqmobile.html

4.4.4 移动web开发框架发展现状

最近两年（2011,2012），移动web开发随着web app的逐渐兴起，得到了较大的发展，但仍处于发展阶段，大部分框架还未完全成熟（不少框架处于beta版，或近期半年才刚发布了正式版的状态），还有较大的成长、发展空间。

5 贴吧运用HTML5的方式和建议

5.1 贴吧PC端的HTML5运用

（1）       目前线上贴吧已经运用的HTML5技术有：本地存储（发贴草稿）、语义化布局标签、Canvas绘图涂鸦。

（2）       可以考虑进一步运用的HTML5技术有：拖拽、本地图片编辑上传、ipad支持video标签视频播放、CSS3（圆角、动画等）。

5.2 贴吧移动端的HTML5运用

（1）       目前线上移动贴吧已经运用的HTML5技术：canvas，CSS3动画、圆角。

（2）       可以考虑进一步运用的HTML5技术有：本地存储、离线存储、canvas、CSS3、视频、音频播放等。

5.3 贴吧对待HTML5技术的方式

5.3.1 PC端的HTML5运用

因为需要考虑差别式的产品设计，兼容性问题处理成本、难度会较大，建议后续PC端的开展方式是：针对某个具体技术点，从产品应用的某个具体功能出发，进行专门的设计和优化，从而来运用HTML5技术。例如：拖拽图片上传、ipad下的mp4格式的视频播放。

5.3.2 无线移动端的HTML5运用

因为移动设备（智能手机）往往可以较好的支持HTML5，同时可以借助HTML5来设计、实现用户体验较优秀的web app，HTML5在无线移动领域的应用场景比较广泛，建议无线移动端的后续开展方式是：

（1）首先，以web app的设计、优化为中心，将已经可广泛使用的HTML5通用技术（例如本地存储、history的api、CSS3动画等）直接运用到web app中；

（2）其次，再考虑针对产品的具体功能特性增加特殊的定制化HTML5特性（例如一些手机设备访问的API、地理信息定位、摄像头等）。

（3）Hybrid app的应用也是HTML5的一个重要发展方向。需要较多篇幅，在本文暂不展开讨论。

phonegap目前是开发混合式应用较成熟的主流框架之一，进一步了解可以查看：http://www.phonegap.cn/

 

5.3.3 对HTML5的技术跟进方式

在无线移动端进行具体的应用实践，积累实践经验；通过无线端的HTML5技术应用，来带动贴吧在HTML5方面的技术进展，同步推动、扩展PC端的HTML5的产品应用思路。

经过一系列的调研，贴吧对HTML5技术的全貌已经有了较清晰的了解；后续的工作，主要是需要解决一些实际应用中的特定场景下的特殊问题。这些问题需要在实践中来解决，单纯的调研是很难做得很深入的。

5.4 一些可以继续深入开展的工作

（1）       建立浏览器统计平台，更细致的了解浏览器占比情况（含手机类型、浏览器种类和版本等）。

目标：将更多支持HTML5技术的手机适配到贴吧的移动智能版贴吧上。

（2）       建立浏览器对HTML5的能力检测平台，了解各款具体浏览器对HTML5的支持情况。

目标：更好的设计、优化产品，利用HTML5来改善产品功能和品质。

（3）       建立HTML5的一些javascript基础库，封装一些更友好的API供产品线使用。

目标：降低HTML5的技术使用成本。

（4）       完善web app的框架设计、开发调试工具支持。

（5）       在特定复杂技术领域继续深化调研：web socket, webGL, canvas, web worker等。

（6）       Web app的hybrid app形式。

这会是无线上一个非常重要的领域，hybrid app能够实现在客户端对HTML5技术进行增强支持，同时能兼顾本地native app和web app的一些实际应用需求。

by yangzuncheng