cordova/phonegap/webapp性能优化方法

时间 2019-11-30

标签 cordova phonegap webapp 性能优化方法栏目 Cordova 繁體版

原文原文链接

1.有条件能够本身作UI,不要用框架.用框架的话不要用jquery mobile,用sencha touch或者jqmobi(app framework)html

2.不要在服务器生成UI,在本地生成.前端

3.前端尽可能少在DOM上插入,删除显示的元素.jquery

4.把页面切换特效关掉,安卓上不少白屏就是这样出现的.web

5.避免网络请求,能够用LocalStorage,sqlite数据库,文件等保存在本地.ajax

6.为数据使用本地缓存,如开启ajax的缓存.sql

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.经过开发者工具来调试,看什么东西占用的时间最多,再有目的的优化.