关于html开发移动应用的开发的一些优缺点

关于html开发移动应用的开发的一些优缺点

---

这个博客很早以前就写好了，只是一直都没发表，因为没有找到几部手机做对比。

这个问题老生常谈了，今天再把这个话题拿出来溜溜，不同的时代嘛，或许新的技术的出现我们在这个技术的未来的前景上看到了支撑点。

经常会有人跑过来问我：“这个应用是不是html做的？”我都默默地插上USB数据线，打开DDMS，然后给他看下。当然，结果很显然，大多数应用首页都还是原生的控件，子页面会有一些html页面。

大多都是问我淘宝，京东，这种电商类的app。今年4月份，就谈今年4月份的事，之后携程有没有改变我不知道了。携程当时的首页，明显看到几个问题：（当然这里我说话要有所保留，不能太黑携程）
1.从页面布局上明显看到，命名规则混乱，view的控件层级也是混乱，多余的层级，还有一些控件还在使用weight这种属性，明显会导致卡顿和掉帧。
2.首页的第二个tab是html的，明显已经卡的不行了，在我的sonyL36上，4核的机器，L36是13年夏天出的旗舰机器，都卡成这样。醉了。

3.。。。。。。
4.。。。。。（我要 保留意见了， 不能再黑携程了，或许人家只是招了个实习生才弄成这样子。）

这个截图是今天早上，一位同事找我聊天的记录，名字就不打码了，反正你们也不认识。

对话就是这样子。

首先我是不推崇大量使用html5的页面，不过一些比较太多图片特效之类的活动页肯定是html好点。但是还有有些奇葩需求，非要应用全部用html做开发。

那么，就算我不喜欢用html5开发，但是，再优缺点的问题上我还是希望你自己能客观点发表对这种应用的评论，写给那些准备全部用html替代原生代码的人一些参考。

那么，既然我不喜欢这种，咱就先让自己认识认识html应用的优点。

优点如下：

• 服务端可控性大，有什么需要改的，随便就改了，发布新版本不在那么痛苦。
• 在这个wifi覆盖很普遍的大环境下，似乎html耗费的加载时间在逐渐缩短。
• 公司那些原来做网页前段开发的人，可以不用辞退，继续开发手机端的web应用页面。
• 轻松实现跨平台。
• 招到的移动端平台开发人员的水平可以降低，因全部用web了，这样就无所谓了。也大大节省了，移动端开发的时间。

缺点如下：

• 上面提到wifi速度现在都提升了，但是android这方面，一直使用的都是webview，5.0之前的android系统是webkit内核，5.0之后便是chromium内核，虽然webiew内核改了，或许性能提升了很多，但是终究他还是单线程在操作，你懂得。
• android的webkit 内核的webview目前还不支持声音，chromium内核的话，内存消耗又提高了。
• 安卓的说完了，来谈一下ios的改变吧，ios 8 推出了WKWebView这个东西，也是为了提升html页面的用户体验，绘制的速度方面已经提升了很多了，内存消耗也降了。
• 由于不是即时编译器语言，代码和硬件的距离很远，html就算你放到本地，浏览器对html解析的速度也是个问题，毕竟你不是即时编译器语言。还有浏览器内核问题，所以解析和绘制都是明显的卡顿。
• 手势操作方面用户体验太差，当然现在facebook，现在新推出了React Native，很好的处理了手势操作的ui响应的灵敏性，但是这个是新技术，到本博客法出来的时候这个新技术出来也不过几个月而已。

毕竟目前的android 设备在浏览器内核方面存在的一堆问题，ios 方面虽然已经处理的很好了，只是ios 本身就很流畅，这样子即使他处理的很好，在用户看来对比原生应用的流畅，html的就显得很卡顿了。

但是，目前前景方面还是看好的，毕竟ios 和android都在努力，fb这个公司也在努力嘛。新的技术不断出现，为html页面提供更多的支撑。

目前，微交互网站上放出来的国内比较好的html5的页面大都是一些活动页，节日抽奖之类的。

而国内的一些正经的公司使用html，页很多都是混合开发。

有篇博客是说html5 ，原生，混合开发三种区别和优缺点希望大家看看。虽然纯html应用目前大量应用开发的话还是有很多问题，但是混合开发还是不错的。

ps:

这里有个我做的一个私活里面的一个报表的动画，正好，找了两个机器对比了下 android 5.0之前和之后的系统版本对于html的性能对比

看下图：由于gif较大请等待。。。。

• 左边手机 : 红米 系统android 5.1
• 右边的手机：中兴的一款高配机器 系统android 4.4

红米的配置偏低但是在动画的表现上明显要好很多，很多动画都展示出来了。但是，如果在电脑上chrome下展示的效果将会更好，动画的执行的细节表现更多，动画运行的更久。这就是“就算你 优化了webview，他的效果已经不能达到很理想。“。

这个动画我同样在iphone 5s ios9和MX 4 android 5.两个机器上做了对比，发现5。0系统的mx 4 的效果和ios 9的5s几乎一致，当然要比上面的红米的效果要好很多很多。