做了幾個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.通過開發者工具來調試,看什么東西占用的時間最多,再有目的的優化.