1)SPA是你的朋友
首先犬绒,Cordova 應(yīng)用程序應(yīng)該采用 SPA(單頁面應(yīng)用) 設(shè)計翼雀。 松散定義徒探,SPA是從對網(wǎng)頁發(fā)起請求開始運行的客戶端應(yīng)用笆豁。用戶先加載一組最初資源(HTML略水,CSS 和 JavaScript腳本)价卤,進一步的更新(顯示新視圖,加載數(shù)據(jù))通過 AJAX 來完成渊涝。SPAs 通常用在比較復(fù)雜的客戶端應(yīng)用上慎璧。GMail 是一個很好的例子,在加載完 GMail 之后跨释,郵件的視圖胸私、編輯、組織都通過更新 DOM 來完成鳖谈,而不是離開當(dāng)前頁面去加載一個全新的頁面岁疼。
使用 SPA 可以幫你更高效地組織你的應(yīng)用,對 Cordova 應(yīng)用來說也有特定的好處缆娃。Cordova 應(yīng)用必須等到 deviceready
事件觸發(fā)之后才能使用插件捷绒。如果不使用 SPA,當(dāng)用戶從一個頁面點擊跳轉(zhuǎn)到另一個頁面贯要,就必須等待 deviceready
事件再次觸發(fā)才能使用插件暖侨。當(dāng)應(yīng)用變得越來越大,這點很容易被忽略崇渗。
即使你選擇不用 Corodova字逗,在創(chuàng)建應(yīng)用時如果不使用單頁面結(jié)構(gòu)也會有嚴(yán)重的性能影響。這是因為頁面之間導(dǎo)航跳轉(zhuǎn)需要加載腳本宅广,資源等等葫掉,即使這些資源被緩存下來,仍然會存在性能問題跟狱。
在 Cordova 應(yīng)用里面可以使用的一些 SPA 庫:
還有很多很多......
2)性能考慮
考慮下面的問題以提高移動應(yīng)用性能:
Click VS Touch
你可能犯的最大也是最簡單的錯誤就是使用 click
事件俭厚,雖然在手機上用得好好的,但在大部分的設(shè)備上驶臊,為了把它和 touch
套腹、hold
事件區(qū)分開绪抛,會強制延遲 300ms。使用 touchstart
或者 touchend
事件會得到極大的改善电禀,300ms 聽起來不多幢码,但可能會導(dǎo)致不流暢的 UI 更新和行為。你可能會考慮到在非 webkit 的瀏覽器上不支持 touch
事件尖飞,看CanIUse症副。為了處理這些限制,你可以 checkout 像 HandJS 和 Fastclick 這樣的庫政基。
CSS轉(zhuǎn)換 VS DOM操作
使用硬件加速CSS轉(zhuǎn)換比使用JavaScript創(chuàng)建動畫要好很多贞铣。請看后面的資源清單。
網(wǎng)絡(luò)抽風(fēng)
好吧沮明,網(wǎng)絡(luò)并不總是抽風(fēng)辕坝,但即使好的手機網(wǎng)絡(luò)也會有延遲,甚至比你想象中還要嚴(yán)重荐健。一個每 30s 下載 500 行 JSON 數(shù)據(jù)的桌面應(yīng)用酱畅,在手機上或者電池豬上會更慢。要記捉 :Cordova 應(yīng)用有多種方法持久化數(shù)據(jù)纺酸,比如:LocalStorage 和 file system。在本地緩存數(shù)據(jù)并弄清來回發(fā)送的數(shù)據(jù)的數(shù)量址否,這在你的應(yīng)用使用蜂窩網(wǎng)絡(luò)連接時尤其重要餐蔬。
其它性能方面的文章和資源
- "You half assed it"
- "Top Ten Performance Tips for PhoneGap and Hybrid Apps"
- "Fast Apps and Sites with JavaScript"
3)識別并處理離線狀態(tài)
從上面關(guān)于網(wǎng)絡(luò)的技巧可看到,不僅可能會遇到慢網(wǎng)絡(luò)佑附,應(yīng)用還可能會進入離線狀態(tài)樊诺。你的應(yīng)用應(yīng)該智能地處理這種情況。否則音同,人們會認(rèn)為你的應(yīng)用死掉了词爬。這很容易處理(Crodova 支持監(jiān)聽 offline
和 online
事件),應(yīng)用絕對沒有理由在離線狀態(tài)下不給出好的響應(yīng)瘟斜。確保測試(看下面的測試章節(jié))并確保測試從一種狀態(tài)切換到另一種狀態(tài)應(yīng)用是如何處理的缸夹。
注意痪寻,online
螺句、offline
事件以及網(wǎng)絡(luò)連接 API 不是完美的∠鹄啵可能需要依賴使用 XHR 請求來查看設(shè)備是真的離線或在線蛇尚。最后,確保為網(wǎng)絡(luò)問題增加技術(shù)支持表單顾画。實際上取劫,Apple 商店(或者其它商店)會拒絕沒有恰當(dāng)處理離線/在線狀態(tài)的應(yīng)用匆笤。關(guān)于這個主題,請看 "Is This Thing On?" 谱邪。