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 阵营（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，也许算是一个解决方案吧。

至于兼容问题的例子，还是微众银行好了： （与新版 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 了，更为繁杂。

HTML5为什么如此受欢迎？主要因为它本身的优势。HTML5的主要优势如下：

1、基于HTML5强大的兼容性。因为HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联，就因为这种强大的兼容性，使得在当下开发界是如此的火，同样也是因为这强大的兼容性，使得手机应用软件，app更适合，也更方便。所以更适合手机app软件开发，正好补充了手机小巧的不足。

2、HTML5开发支持的手机系统有android、ios。

3、HTML5其突出的特点就是强化了web页的表现性,追加了本地数据库，可以用作离线应用的开发，离线应用就是把需要的资源先缓存到本地，下次再查看时无需联网。

4、HTML5开发能提供更快、更简便的服务，代码可高度重用，服务发布方便。

5、动画、游戏动态效果，地理定位等很多app应用正在崛起，而HTML5技术的强大优势就是这种让我们惊叹的效果。而未来采用HTML5开发app的，将会大量减少代码量，应用软件也会得到更高的用户体验，更好的视觉效果。

---