Question

HTML5实现APP和原生方式有多大差距，多少坑

Answer 1

我试过用国内的 HBuilder + MUI 框架开发，也试过 Cordova + React for Web
开发。现在手上的某App，正在同步使用 Cordova + React 和 React Native 分别开发 UI
层（逻辑层代码公用）。当然，都是小型应用，还不需要像 @李维特 写的一样考虑页面切换等问题……

我的结论是：坑、好大的坑、虎纹大坑。

才疏学浅，只总结出以下问题：

1. 性能问题
先是动画。
无论是 CSS3 动画、还是 Canvas 动画，还是 JavaScript 操作 DOM 的动画，都卡；后者尤甚。高端机尚可，低端机是可以卡成幻灯片的。我录过 GIF，使用的设备是台电P88，全志 CPU 。大概就是这样：http://zsxsoft.qiniudn.com/upload_images/2015/08/201508158461_695.gif

其次，是 DOM 性能问题。
感谢 React 带来了 Virtual DOM，部分解决了局部区域 DOM 刷新时的性能问题。不过，一旦涉及到较大区域 DOM 更新，反倒有更大的性能损耗（最终计算出来的结果还是要全部替换掉，多做了一步 Diff ）。

因为性能问题，Facebook 2012年离开了 HTML5 App 阵营（Facebook: “Betting on HTML5 Was a Mistake”）。但时至今日，还是没有什么改善。也分享一篇文章，可以看看坑：移动端HTML5游戏性能优化。
这里有个例子：微众银行 App 是 Cordova + Ionic + Angular。微众很行app十分卡顿，大家觉得么？

2. 兼容问题
先只算官方系统。Android系统的 WebView 一般随 Android 版本更新（当然，也可以自己去 Play Store 更新），每个版本所支持的功能均不同。坑的是，在国内的环境下，基本不会再更新了。有的功能，在 PC 上对应版本的Chrome 是有的，到该版本 WebView 就没有了。
比如说，XMLHttpRequest 的 onprogress 在 Android 4.0.4 上不被支持。于是，针对这类系统，只能采用像之前对 IE 的 Hack 一样，用 iframe 来替代进度条。
再比如说，ECMAScript 6 被高版本 WebView 支持。如果开发者写惯了后，引入了 Symbol 等，又忘记了 polyfill 。在低版本 WebView 就会出错。就像我这样：<Table> doesn't support old browsers. · Issue #1685 · callemall/material-ui · GitHub
接着呢，感谢 ROM 厂商乱改系统自带的 WebView ，从而导致在各种小细节上不同手机的显示效果或运算结果不同。更倒霉的是，有的甚至还会全页面混乱。
怎么解决？个人认为，像微信那样自带一个 X5，也许算是一个解决方案吧。

至于兼容问题的例子，还是微众银行好了：https://www.v2ex.com/t/215728 （与新版 iOS 9 的 WebView 不兼容）

3. 调试问题
先吐槽：Android 5.0+ 的系统内的 WebView ，可以用 Chrome for PC 来调试。但需要翻墙。

调试分调试 JavaScript 和界面两方面。
JavaScript
方面，如果 throw 出一个错误，很可能剩下的事情你都干不了了。手机端的表现就是什么操作都没用，也不会崩溃退出之类。在开发时，对于
JavaScript 报错，MUI 和 Cordova 均可以通过 adb logcat 来检查报错；Release 后可就没办法找用户连
USB 了。weinre 等工具对于 JavaScript Debug 没啥用。
那 weinre 干啥用？只是让你看 DOM 层级或动态执行代码罢了。这就是 UI 方面的调试了。这部分的话，考虑到兼容问题，自求多福吧……

Cordova 提供了 Ripple，倒的确是一个很不错的解决方案。但是并不能涵盖所有的手机……

4. 代码安全性问题
正
如.apk -> .dex -> .jar -> .class -> .java一下就能把代码全部拿出来看一样，.apk
-> .js 更为方便，解压一下就好了。于是，在 Release 前，必须 gulp / grunt 构建工作流，把 uglify
之类全部一股脑塞进去。这部分和做网页前端没啥区别，差别大概只有不需要考虑代码切分等（毕竟没有网络，全在本地）。
然而，这样的代码，修改成本非常低。比如我做一个付费的本地游戏，只要简单地修改一下.js，轻轻松松破解验证等后重新打包回去，破解版游戏就做好了，比 Java 的简单多了。就算有 C++，我 js 不调用你，你又奈我何？没有服务器验证的话，玩蛋去吧。

5. 功能问题
如果没有 Native Code，一切HTML5 App都是空架子。所以，Java / Objective-C / C#仍然是必须学习的语言；Native App 如何开发也仍然是必修。比如以下代码，就是在 MUI 里用原生浏览器打开一个链接。
function openInBrowser(originalUri) {
var Intent = plus.android.importClass("android.content.Intent");
var main = plus.android.runtimeMainActivity();
var Uri = plus.android.importClass("android.net.Uri");
var uri = Uri.parse(originalUri);
var intent = new Intent(Intent.ACTION_VIEW, uri);
main.startActivity(intent);
}

当然，Cordova 就得写 plugin 了，更为繁杂。

Answer 2

H5开发的web APP和原生APP的区别有以下几个方面：
一、开发方面
原生App
⊙ 每一种移动操作系统都需要独立的开发项目
⊙ 每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等
⊙ 需要使用各自的软件开发包，开发工具以及各自的控件

移动Web App
⊙ 因为运行在移动设备的浏览器上，所以只需要一个开发项目
⊙ 这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成（PHP,Ruby on Rails,Python）
⊙ 这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2，APPcan以及Appcelerator Titanium等等。

二、能力方面
原生App
⊙ 能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等

移动Web App
⊙ 只能使用有限的移动硬件设备功能。