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

我试过用国内的 HBuilder + MUI 框架开发，也试过 Cordova + React for Web 开发。现在手上的某App，正在同步使用 Cordova + React 和 React Native 分别开发 UI 层（逻辑层代码公用）。当然，都是小型应用，还不需要像

写的一样考虑页面切换等问题……

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

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

1. 性能问题

先是动画。

无论是 CSS3 动画、还是 Canvas 动画，还是 JavaScript 操作 DOM 的动画，都卡；后者尤甚。高端机尚可，低端机是可以卡成幻灯片的。我录过 GIF，使用的设备是台电P88，全志 CPU 。大概就是这样：

其次，是 DOM 性能问题。

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

因为性能问题，Facebook 2012年离开了 HTML5 App 阵营（

）。但时至今日，还是没有什么改善。也分享一篇文章，可以看看坑：

。

这里有个例子：微众银行 App 是 Cordova + Ionic + Angular。

2. 兼容问题

先只算官方系统。Android系统的 WebView 一般随 Android 版本更新（当然，也可以自己去 Play Store 更新），每个版本所支持的功能均不同。坑的是，在国内的环境下，基本不会再更新了。有的功能，在 PC 上对应版本的Chrome 是有的，到该版本 WebView 就没有了。

比如说，XMLHttpRequest 的 onprogress 在 Android 4.0.4 上不被支持。于是，针对这类系统，只能采用像之前对 IE 的 Hack 一样，用 iframe 来替代进度条。

再比如说，ECMAScript 6 被高版本 WebView 支持。如果开发者写惯了后，引入了 Symbol 等，又忘记了 polyfill 。在低版本 WebView 就会出错。就像我这样：

接着呢，感谢 ROM 厂商乱改系统自带的 WebView ，从而导致在各种小细节上不同手机的显示效果或运算结果不同。更倒霉的是，有的甚至还会全页面混乱。

怎么解决？个人认为，像微信那样自带一个 X5，也许算是一个解决方案吧。

至于兼容问题的例子，还是微众银行好了：

（与新版 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 里用原生浏览器打开一个链接。

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

大概就是这样 _(:з」∠)_ 求轻喷。

（话说我tm在复习呢写答案合适么？！）