前言
记录下小程序的优化,有些是实践,有些是参考
优化建议
- 分包,用户可以更快的打开小程序
- 前置请求,跳转第二个页面前,先进行请求
- 精简setData的数据,与视图渲染无关的数据尽量不要放在data中,小程序内存宝贵
- 避免阻塞渲染
-
图片缓存,开启HTTP缓存,后端或云服务提供支持
-
图片大小,对于一些大图,可通过裁剪压缩来控制尺寸、大小(ps:感觉这个很有用,直接把单一页面的评分从不及格抬到了90,毕竟图片实在有点多-_-||)
1.在来源上进行控制,用户上传图片时,就对其进行裁剪压缩
2.在获取图片资源时,服务端对其进行裁剪压缩,如阿里云提供了类似的服务,通过图片样式来控制访问资源的图片规格 -
部分静态资源科转为云上,不打包进小程序,并对静态资源进行压缩
-
数据缓存,对于不需要经常更新的数据,可进行缓存,减少不必要的请求
-
对于深拷贝的场景,减少使用JSON.stringify、JSON.parse来完成,可自行写一个满足使用的递归拷贝函数;或使用第三方(包不能太大)
-
在内存紧张时,可考虑storge换内存的思路
-
对于setData
1.当setData的数据量不可避免的过大时,可考虑对data进行拆分,可考虑利用vuex的命名空间
2.将多次setData操作合并成一次
3.切换到后台后,停止setData -
在代码上的话,一些前端常用的优化如防抖、css硬件加速、虚拟列表
等 -
调试模式下,console.log会占用内存,测试性能时需要关闭,能更好的反应真实的数据
参考:
微信官方文档——优化
你可能不知道的mpvue性能优化技巧——fengxianqi
小程序页面加载性能优化——w_西城
mpvue小程序开发 - 生命周期梳理
https://github.com/mpvue/blog/issues/2
网友评论