cordova/phonegap/webapp效能最佳化方法

標籤：style   blog   color   io   os   使用   sp   檔案   資料   

做了幾個cordova的項目,覺得webapp效能的確是比不上原生,在IOS上還好,安卓上特別的明顯.技術群裡面很多人都在說cordova是個渣,沒用之類的.其實只是很多人沒有深入去瞭解,做點小最佳化,一般的增刪改查APP還是完全能夠滿足效能要求的.

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.通過開發人員工具來調試,看什麼東西佔用的時間最多,再有目的的最佳化.

 

cordova/phonegap/webapp效能最佳化方法