facebook apk for android 4.0.4(HTML5實現APP和原生方式有多大差距，多少坑)

HTML5實現APP和原生方式有多大差距，多少坑

我試過用國內的 HBuilder + MUI 框架開發，也試過 Cordova + React for Web

開發。現在手上的某App，正在同步使用 Cordova + React 和 React Native 分別開發 UI

層（邏輯層代碼公用）。當然，都是小型應用，還不需要像 @李維特 寫的一樣考慮頁面切換等問題……

我的結論是：坑、好大的坑、虎紋大坑。

才疏學淺，只總結出以下問題：

1. 性能問題

先是動畫。

無論是 CSS3 動畫、還是 Canvas 動畫，還是 JavaScript 操作 DOM 的動畫，都卡；后者尤甚。高端機尚可，低端機是可以卡成幻燈片的。我錄過 GIF，使用的設備是臺電P88，全志 CPU 。大概就是這樣：買粉絲://zsxsoft.qiniudn.買粉絲/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，也許算是一個解決方案吧。

至于兼容問題的例子，還是微眾銀行好了：買粉絲s://買粉絲.v2ex.買粉絲/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.買粉絲ntent.Intent");

var main = plus.android.runtimeMainActivity();

var Uri = plus.android.importClass("android.買粉絲.Uri");

var uri = Uri.parse(originalUri);

var intent = new Intent(Intent.ACTION_VIEW, uri);

main.startActivity(intent);

}

當然，Cordova 就得寫 plugin 了，更為繁雜。

很赞哦!（97559）