对HTML5移动开发看法

发表于2015-04-29 22:35:55| --次阅读| 来源webkfa| 作者小猪仔

摘要：对HTML5移动开发看法

我是做HTML5开发的，一直坚信HTML5以后会很强大，以后一定是HTML5的天下，哈哈哈哈

下面是我在网上看到的，我想说，他们就是在放屁

1.HTML5没技术含量 (吐你你开发过html5吗)

2. HTML5性能太差(哪里，现在HTML在android4.0以上那速度不比原生的差，不会用就别说话)

下面是网上说的

每次想写用HTML5在android 和 iPhone上的心得的时候总是不自主的打住，因为总是看到两个观点：

1. 用HTML5写应用太没有技术含量了，是个人培训两天就会做网页

2. HTML5性能太差了，根本不适合做移动开发，还是等硬件性能提高再说吧

好吧，这两个观点我都认可，但我却不能全部接受。
就第一点而言，我相信HTML5是可以降低开发人员的门槛，难道这不是好事吗？但是却不能降低到大家认为的那种程度，不信你让一个网页开发的人做个移动应用试试。而且java/objective-c/javascript谁有谁劣，其实没有定论，都不过是表达思想的工具而已，关键看使用的人。就语言本身而言，js是最难学的（本人这些语言都用得还可以，所以敢做这样的断语，包括c++也没有js难）。Java/objective-c都提供了高级的语言属性，包括设计属性，可是你在js里却不能直接找到。比如代码托管，对象继承等等。
很多人都使用过甚至做过网页特效，不过抄的比较多吧。你要真的能写才是入门。包括CSS3，不是说你用dreamware拖拖拽拽就可以的。
第二点，性能的问题，这个是不能回避的，确实比原生的差，问题是存在的，是不是不能解决能？这是我下面要讨论的重点，但是首先我们要确立一个观念，我们不是做游戏，一个应用不会消耗太多的CPU吧，我们主要关注的是用户体验。如果用户接收不了，那才叫性能问题，所以本文不会讨论用html5开发游戏，至少在android上现在无法做到（特别是android2.x）。
啰啰嗦嗦说了一堆，只是个开头。现在进入正题，性能问题。提出两个常识：1.javascript本身不存在性能问题，比如做一些纯运算，不会有问题。2.性能问题主要集中在dom操作上，Dom越多，移动性能越差。3.运算上有性能可以用原生语言做插件，这点webview上实现很简单（我用的是phonegap）。

相信很多人用过jquerymobile做开发，很好用是不是？但是我告诉你，jquery mobile做出来的东西用户体验很差，特别是页面之间的转换，那简直是个噩梦。究其原因，就是jquery本身存在dom效率低下的问题，我的“无锡EASY消费”这个应用一开始就是用jqm做的，过程很痛苦，差不多就要放弃了。放弃jqm吧，短时间内，它不可能可用，特别是它没有考虑 iphone/android2.x/android4.x之间的差异。还有它没有scrollview，使得很多应用不太好实现。现在我完全放弃了jqm了，你不能用一个半成品做一个产品。

Sencha，做过html5移动开发的人一定都看过这个框架，叹为观止。在iphone上简直无与伦比，可以说比原生的都要漂亮，而且性能还可以。我在android上想用却始终没有用起来，加载不起来，看看框架代码就有10万行。应该在android的高端机上效果不错的，但是在中低端机器上，还是不行，我没有使用起来过，据说要裁剪，好像有相应的工具，我没有仔细研究了，反正我觉得代码太多了，一定耗用的内存很多。
国内的appCan，严格的说不是html5框架，而是一个综合的解决方案，我没有用过，只是下载了两个应用看了看，性能还是不错的，特别是scrollview的性能，应该是用的iScroll吧，iScroll对于内部节点多了之后会有性能问题。我研究不多，这里就不说了，有兴趣的可以用用看，然后把经验发布出来和大家分享。
其它还有不少html5开发框架，我就没有研究过了。
由于上面的框架我都没有用起来很顺手，所以无奈下，就开发了自己的框架jMelon，我不想推销我的框架，所以细节方面不说了，主要把它怎样解决性能方面的一些方案说下。（我之前发不过一个应用，用了jMelon的初级版本，应用是“礼佛堂”，有兴趣的可以下载了看看；下一版礼佛堂将使用最新的jMelon的最新版本，会在3月份左右发布）

1. touch事件

点击反应延时，是html5移动应用经常受诟病的地方，这不是性能问题，是webkit为了让touch事件模拟mouse事件做的虚拟。
所以mouse事件会比touch晚200ms左右，所以如果你是做移动客户端，就不要使用mouse事件（包括click事件等），而要用touch事件本身。
Jqm基本上是反例，而sencha是正解。

2. 动画

css3提供了很多动画（transation）的支持，这太让人兴奋了。一个简单的css，就能做出一个动画，你在iphone上测试过吗，堪称完美。
可是，你在android上测试过吗？不知道为什么，其它元素会跟着动画运行而改变，甚至出现闪屏，android4.x也没有改变这种状况。
所以在android上，css动画不可用，你唯一能做的，就是自己用js来写动画。如果你一定要用，就要测试好，如果能忍受再用。（新版的“礼佛堂”有些地方也用了css动画）

3. dom的移动

移动dom元素是经常要用的功能，性能上最受诟病的也是在此。手指跟动延时，只要做html5移动开发都会遇到这个问题。
      首先我们要找到移动dom节点最快的方法，就是使用css的translate方法，要放弃掉top/left等方式。这种方式还要分不同的平台，android 2.x要用2d，也就是translate；而android 4.x和ios需要用translate3d，因为translate3d可以使用硬件加速，这种方法android2.x是不支持的。
      关于trnaslate3d还有个问题需要注意，那就是此dom节点如果从trans3d到trans3d则加速明显；如果原来没有trans3d属性，改成有trans3d属性，则会卡一下，这点很重要。
      还要注意的一个问题，就是translate3d其实是异步的，所以在使用translate3d的动画时需要注意，如果对两个dom同时使用translate3d的动画，效果是不太可控的。
      最后说下如何提升移动性能的另一个方法，那就是尽量减少dom节点，想尽各种方法减少dom节点。这点很凑效，在屏幕上显示的dom节点本来就不多。

4. 转场动画

转场动画最著名的是ios上的滑进滑出，这个效果用html5实现还是有难度的，因为从第三点看，android上必须使用自己写的动画，ios上可以使用translate动画，但是translate3d同时作用在2个节点上又不可控的。
虽然如上述所说，但是只要dom节点控制合理，效果还是可以忍受的。

5. scrollview

scrollview当前比较著名的是iScroll4，但是你要实现listview的时候，就会有问题，如果listview中有一万个item，你就可以想象发生什么事。
所以，jMelon采用的是sencha的方式来处理的，那就是只生成显示的item，滚动过程中不断移动item和重画item来处理。这样无论需要显示多少个item都不会有问题。
在新“礼佛堂”中到处有这样的处理。

6. css

说几个琐碎的：
l 不要在android上使用:after和:before，处理性能特别差，我也不是很理解为什么

l 不要在android2.x上使用过渡色、圆角、投影、模糊等效果，性能差，而且效果也不好，可以使用贴图来实现

l 不要在android上使用webkit-mask，效果太差
l 不要在android上使用transation动画和key-frame动画，效果不好

7. phonegap中js加密

这个大家自己研究吧，是可以做到的evaljs和sendjavascript。新版“礼佛堂”进行了加密。
还有几点我没有解决的问题，希望有能解决的人告诉我答案：

1. 为什么android上的图片，在被手指按上去之后，会分辨率变低

2. 如何减少内存的消耗，因为即使图片的dom被删除，实际内存却清不掉（我在android2.x里测试），包括clearChache也不行，不知道有没有什么好的办法。

。。。。