Cordova app 開發(fā)最佳實踐

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ò)連接時尤其重要餐蔬。

其它性能方面的文章和資源

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)聽 offlineonline事件),應(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?" 谱邪。

譯自 :Best Practices Cordova app development

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末炮捧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子惦银,更是在濱河造成了極大的恐慌咆课,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扯俱,死亡現(xiàn)場離奇詭異书蚪,居然都是意外死亡,警方通過查閱死者的電腦和手機迅栅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門殊校,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人读存,你說我怎么就攤上這事为流。” “怎么了宪萄?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵艺谆,是天一觀的道長。 經(jīng)常有香客問我拜英,道長静汤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任居凶,我火速辦了婚禮虫给,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘侠碧。我一直安慰自己抹估,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布弄兜。 她就那樣靜靜地躺著药蜻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪替饿。 梳的紋絲不亂的頭發(fā)上语泽,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音视卢,去河邊找鬼踱卵。 笑死,一個胖子當(dāng)著我的面吹牛据过,可吹牛的內(nèi)容都是我干的惋砂。 我是一名探鬼主播妒挎,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼西饵!你這毒婦竟也來了酝掩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤眷柔,失蹤者是張志新(化名)和其女友劉穎庸队,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體闯割,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡彻消,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了宙拉。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宾尚。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖谢澈,靈堂內(nèi)的尸體忽然破棺而出煌贴,到底是詐尸還是另有隱情,我是刑警寧澤锥忿,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布暖途,位于F島的核電站掘剪,受9級特大地震影響伍茄,放射性物質(zhì)發(fā)生泄漏偏塞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一钉答、第九天 我趴在偏房一處隱蔽的房頂上張望础芍。 院中可真熱鬧,春花似錦数尿、人聲如沸仑性。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诊杆。三九已至,卻和暖如春何陆,著一層夾襖步出監(jiān)牢的瞬間晨汹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工甲献, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留宰缤,地道東北人颂翼。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓晃洒,卻偏偏與公主長得像慨灭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子球及,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,072評論 25 707
  • HTML5面試題總結(jié)1.基礎(chǔ)問題 = 和 == 和 === 的區(qū)別氧骤?= : 用于賦值 == : 用于判斷 === ...
    LorenaLu閱讀 1,182評論 0 4
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)吃引,斷路器筹陵,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 首先要感謝纖兒童鞋給我畫了一副畫像,感覺我是日本動漫里的女主镊尺,本來就是我死皮賴臉要求的畫像朦佩,沒想到纖童鞋把我畫的如...
    yokocw閱讀 362評論 1 2
  • 五月初五弄砍,大家早安仙畦。今日端午,不一一問候音婶,祝大家吉祥慨畸!筏喻寮白:萬水千山粽是情,管他吃咸還是甜衣式。
    筏喻微集閱讀 262評論 0 0