cordova/phonegap/webapp性能優化方法

1.有條件能夠本身作UI,不要用框架.用框架的話不要用jquery mobile,用sencha touch或者jqmobi(app framework)

2.不要在服務器生成UI,在本地生成.

3.前端儘可能少在DOM上插入,刪除顯示的元素.

4.把頁面切換特效關掉,安卓上不少白屏就是這樣出現的.

5.避免網絡請求,能夠用LocalStorage,sqlite數據庫,文件等保存在本地.

6.爲數據使用本地緩存,如開啓ajax的緩存.

7.限制結果集的高度和寬度

8.不要讓界面等數據,先加載界面,再加載數據.如CSS跟html寫前面,JS寫後面.ajax異步等等.

9.全部的動畫用CSS的轉換和硬件加速,性能會好不少.

10.使用本地的滾動條,用插件的話,卡出翔!

#scroller { overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; top: 48px; bottom: 0px; left: 0px; right: 0px;}

11.避免用click觸發,由於會有300毫秒的延遲,直接用touch觸發.

12.優化圖片,爲每個元素設置一個圖片的src是很慢的.直接用CSS Sprite Sheets,在不少圖片的APP裏面效果明顯.

13.圖片的大小要跟html的容器相適應.

14.不要用陰影和梯度,特別在安卓手機上,陰影渲染的代價太大了.其餘還有文字對齊和邊界半徑.

15.減小回流.減小DOM的數量,減小DOM訪問,避免用js調整佈局,所有用CSS來完成.

16.沒用到的框架,不要傻乎乎的全引用進來,搞清楚你須要哪些,不須要的就別加載了,加載是要時間的,特別在手機瀏覽器上,特別明顯.

17.經過開發者工具來調試,看什麼東西佔用的時間最多,再有目的的優化.