基於PhoneGap開發的App性能及體驗怎麼樣?
我兩年前玩過 Android 上的 PhoneGap,今年又玩了 iOS 上的 PhoneGap。其實一個相對簡單的 PhoneGap app,即使加上 3D animation,如果優化得當,至少在較新的 iOS 設備上是足夠流暢的。
首先我堅持用 HTML + CSS + JS 開發 UI 絕對是不可阻擋的趨勢。這一點被包括 WP 在內的後來的系統都發揚光大了,甚至在桌面平台都有著這樣的趨勢(比如最近的 Lantern)。
其次就是 Webkit 為了 UI 性能實際上做了非常多的優化,提供了非常多的可能。為了有一個流暢的 UI,要儘可能用 CSS transition 取代傳統的 setTimeout/setInterval 動畫;用 CSS transform 取代絕對定位。可能的話盡量用 vanilla JS,不要用 jQuery 一類的框架。PhoneGap 對 native API 的一切調用都是非同步的,要做出相應的適應。
而 PhoneGap 無論如何應該算是當前各個類似平台(比如 Titanium)中最成熟的一個。所以我相信,對於絕大多數 app,使用 PhoneGap 開發是一個很好的選擇(像遊戲這樣的當然不可能);並且隨著移動處理器性能的提升和 Webkit 本身的優化,這個選擇優勢會越來越大。
PhoneGap 的 native API 應該也是最方便的。對於 JavaScript 無法解決或是性能太差的部分提取出來用原生代碼實現其實非常方便。當時我寫過一個 Android 上的 PhoneGap plugin,非常舒服。並且現在就已經有大量的 PhoneGap plugin 可以直接拿來改上幾行代碼進行使用。
一個很推薦的方案就是先使用 PhoneGap 進行開發(因為開發起來真的很快啊);然後視情況逐步把有性能問題的部分、有性能問題的平台遷移到 native implementation。搜一下桌游精靈。感受一下。
PhoneGap+Bootstrap3+AngularJS+Html5的組合。只是簡單的嘗試一下。Android+Apple合在一起,過年時候也就是三周左右。未做更多的優化。么有UI。phonegap/cordova是比較老的技術架構。
起先設計時,因為當時的環境所限,產品被設計成hybrid模式,也就是原生和HTML5混合開發。
phonegap不強調懂前端就能做好app,而是說你的原生app里某些界面可以用phonegap,js和原生混合編程。直接把js代碼和phonegap引擎打包出來的app,在Android4.4以下的手機沒法商用。核心原因是webview里dom和css動畫太卡,切屏、滑動、渲染效率與原生差距太大。另外phonegap雖然開源插件不少,但維護更新也是坑很多,以及仍然有大量功能在插件里找不到,還是得原生開發。我們做的一款產品(免費)叫5+runtime,它解決這些問題的思路是:
1. 通過js調用原生動畫來提升體驗,比如窗體切換、下拉刷新、長列表滾動這些在Android上是view的動畫,而不是css動畫。同時有具備豐富的可定製性。2. 大幅強化了js的能力,可以調用到原生40多萬api,基本沒有原生能做而js不能做的事情。3. 配套開發環境完善,ide:HBuilder、引擎:5+runtime、前端框架:MUI,這條工具鏈完善度很高。4. 案例是最重要的,可以訪問http://www.dcloud.io官網看案例,很多大型互聯網公司都在用DCloud的引擎做app。
pg挺好,但同類型框架選擇很多。rn,國產的2大冤家apicloud dcloud等等,我認為pg不是最好的選擇。
基於15年初用phonegap做app的體會
1、fixed沒用!2、href用於頁面跳轉,錨鏈接作廢!3、調試一次要1分鐘4、和系統交互的js無法調試5、插件太少,對於國內沒用。6、性能不好。列表頁幾十條就卡,滑動不暢。優點:
設計周期短;plug-in多;成本低(節省一大部分後台程序員的工時);cross platform時能沿用大部分代碼。但由於是在web base上建築的。性能上跟native code還是有一段距離。
adobe一直在提醒,衍生出來的代碼很有可能因為太慢或太不native,而不通過apple的上線審批。怎樣不怎樣,我給你一坨App你自己去體驗: 一倍半 饞口街 中國電動車網 奉化100 這裡面有的優化的很好,在Android上面跟原生都有的一拼!也有的比較卡!自己體驗一下才是最重要的。最好是找i9100等這樣的老機器體驗! 還有注意它們應用的複雜度!
一般的Android程序,分為java層和native層,處於安全性的考慮,越來越多的實現都移到native層倘若用phonegap實現,安全性的問題如何解決?
推薦閱讀:
※求大神怎麼做出一個css進度條?
※移動端視網膜(Retina)屏幕下如何解決網頁中1px顯示問題?
※如何藉助HTML5微數據優化網頁?
※Web 平台是否會在移動平台上最終超過應用平台?為什麼?
※移動端HTML5如何開發?跟PC端有什麼區別?
TAG:移動應用 | JavaScript | HTML5 | 移動開發 | PhoneGap |