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

2023-02-22 02:18:01html-css010

HTML5实现APP和原生方式有多大差距，多少坑,第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 了，更为繁杂。

tmall

简介：

“天猫”（英文：Tmall，亦称淘宝商城、天猫商城）原名淘宝商城，是一个综合性购物网站。2012年1月11日上午，淘宝商城正式宣布更名为“天猫”。2012年3月29日天猫发布全新Logo形象。2012年11月11日，天猫借光棍节大赚一笔，宣称13小时卖100亿，创世界纪录。天猫是马云淘宝网全新打造的B2C（ Business-to-Consumer，商业零售）。其整合数千家品牌商、生产商，为商家和消费者之间提供一站式解决方案。提供100%品质保证的商品，7天无理由退货的售后服务，以及购物积分返现等优质服务。2014年2月19日，阿里集团宣布天猫国际正式上线，为国内消费者直供海外原装进口商品。

2014年11月11日天猫双11再刷全球最大购物日记录，单日交易571亿。

2014年12月11日，针对工商总局曝光天猫1号店双十一售假一事，天猫官方发布回应表示，对假货“零容忍。”已下架3件涉假商品和1件不合格商品，并冻结涉假店铺。待查实后，将对涉及的店铺进行封店、清退。

参见百度百科：http://baike.baidu.com/link?url=MlP0IYeyO2RKrI82CgL4rNSZBrjjHPh6ZbyIxUGm16FGfL9zbONjfC6qxDnc_5jIbSsb8Yjf97eL_h99z3UD0K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

第一种实现方法：图片作为背景

</div>

第二种实现方法：div使用绝对定位，图片作为div里的对象

</div>