关于国内html5现状吐点槽

html5，喊啊喊，喊的好久了，我们一帮jser也在后面摇旗呐喊了多年，但是事情总是很缓慢的在往前发展，但是毕竟它还是在发展的。奶奶的。从n久之前，已经不只n遍下过决心要学习要系统的学习html5了，逛各大网站，翻w3c文档，但是每次都是热火一会又放下了，因为我的工作是要兼容ie6的，国内的ie6是占了50%以上市场份额的，于是，每次给自己鼓起了百倍的信心要学htm5的先进生产力，但是不久又还是偃旗息鼓的回去捡起被我吐槽了一百遍一百遍的ie6继续过着jser的刀耕火种的日子.........

前面和武汉的一同事聊html5，我一直以为我这么久的在关注html5的发展，应该对其还是有一定了解的，探讨中，我才发现我一直只是在关注而已，甚至我知道canvas，但是canvas的一些常用api我都记忆模糊，被鄙视了，好蛋疼。。。。。

 

临渊羡鱼，不如退而结网

好吧，现在什么技术最火？HTML5！现在什么技术最时尚！还是HTML5！也许有泡沫和炒作的成分，但是不得不承认，这个世界上本就没有所谓的公平。多年来兢兢业业带给我们无数快乐痛苦和就业机会的Flash，在代表着众多巨头利益，从蹒跚学步起就被内定为太子的HTML5面前，也许注定就是为他人做嫁衣的命。

当你在网上看到铺天盖地的HTML5新闻，各种各样炫目的DEMO，同时脑袋里充斥着各种新鲜的名词，什么矢量动画、视频标签、离线存储、地理信息、新型表单、语意标签等等等等的时候。你是否会有一些迷茫？到底什么是HTML5？应该从何处入手？  我决定从canvas入手，因为整个的html5 和 每个前端开发者现有的技术属性上来看，学习成本最大的可能就是这玩意了的，其他的都真的还是相对很简单的。

好消息

 最近有些好消息就是 移动qq游戏平台推出html5版   q+宣布其应用平台采用了webkit内核支持html5应用，以及磊友科技的几款html5游戏已经面试，等等这些，说明国内的html5已经有了先行者在探索，而不在是都在伸长了脖子在呐喊和等

交互兼容性

很多时候，“跨平台”三个字已经成了鸡肋和枷锁，不知多少优秀的产品死在这上面。跨平台不是HTML5最大的噱头么？

这里所说的跨平台，不是传统的linux和Windows，也不是说兼容android和ios，更不是指IE和Firefox，而是指同时跨PC、平板以及手机设备。这种范围的跨平台就决定了这不仅仅是一个简单的技术问题，而同时是一个交互问题。

下表是PC和触屏设备的常用交互方式对比。

	PC平台（键盘、鼠标）	平板设备（触屏）
外接键盘输入	×	○
单击	○	○
双击	○	×
拖动	○	○
多点触控	×	○

 

一些技术细节

PC上的就不说了，这里只说Android和IOS。HTML5对于触屏设备的单点触控提供了touchstart，touchend，touchmove和touchcancel四种事件。而通过测试表明，一旦监听了这四种事件中的任意一种，很多设备将不会触发click事件。这样的话，要想实现拖拽和点击两种交互操作，就只能通过上面这一组touch事件来组成。我们使用的是以下的方案：

事件顺序	操作
touchstart->touchend	点击
touchstart->touchmove(多个)->touchend	拖拽
touchstart->touchmove(多个)->touchcancel	拖拽
touchmove(多个)->touchcancel	划过
touchmove(多个)->touchend	划过

也就是说，如果刚触发完touchstart事件马上就触发touchend，说明手指只是轻轻点了一下屏幕，也就是所谓的点击操作。这样即使不监听click事件也能实现点击的侦听。不过这里有一个实际的情况，很多山寨的Android设备屏幕很不灵敏，比如我们公司拿到的电信酷派D530手机，需要使劲按下才能有所感知。这种情况下一定会触发touchmove事件。所以针对Android设备的点击操作可以适当放宽，比如touchstart和touchend之间可以允许有少量几个touchmove，并且touchmove的距离不能超过多少个像素等等。

性能

HTML5跑canvas动画,游戏 的 性能，我只能用坑爹两个字来形容。从硬件上来讲，目前html5应用比较广泛的移动平台设备由于电压和芯片架构的不同，同样主频的手机性能和PC上进行相比差距甚远。再加上HTML5本身是一种解释型的脚本语言，其运行效率也远远低于本地应用。而pc平台的话，目前的浏览器战国时代硝烟四起，格局一时间难以打破，但是html5大一统的趋势还是明朗的，鉴于HTML的Canvas只为我们提供了非常简单的接口。所以我们目前急需等待如 flash flex之于as3 般商业化的开发ide 集成环境 和对应的引擎， 而目前市面上面的针对canvas html5的引擎已经有不少，不过都还在发展阶段。总之，我们还需要等，但是，学习，确是现在不准备，更待何时！

 

纯Canvas开发和DIV + CSS方式的对比

       DIV + CSS方式并不太适合复杂的动画开发，一是封装比较困难。再来是性能问题。Canvas本身只是一个二进制的内存块。而DIV+CSS却涉及到了DOM模型，动画效果也要通过修改CSS然后浏览器观察到变化再修改DOM的渲染，绕了一个大弯。通过实验测试，在手持设备上，这种方式比纯Canvas的动画慢了大概1.5倍到2倍。