App性能提升方法

时间:2022-12-09 09:27:38

总体思路:精简请求数

1.css sprit 图像拼合,将所有可拼接的所有图像拼接为一整张图像,然后再利用css中的position定位来处理,降低图片的请求数

2.懒加载:只渲染客户端用户可见区域【即首屏加载】(利用了scroll滚动事件或touchmove事件,通过ajax请求来动态加载数据渲染客户端)

3.模块化处理:利用requireJS或seaJS来异步加载所依赖的js库/框架或自定义模块(主要是防止js解析阻塞浏览器效果渲染)

4.数据本地化:利用cookie或html5提供的local storage/session storage/application cahe/indexDB/webSQL等离线存储技术,将不需要实时响应的数据进行本地化存储,在后续的数据操作中直接从本地获取数据,极大减少APP的请求数

5.图形图像canvas化:对于项目中需要用到的部分报表或图形,尽量使用canvas来绘制,简化DOM树分支,提高渲染速度

6.代码优化的奇淫技巧【减少使用fixed/absolute定位机率】【闭包内存释放】【css3来编写动画,移动端中若动画效果影响了APP性能,可适当减少移动端动画】