小程序体验优化 | 青训营笔记

116 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 16 天

小程序优化,是一个比较难的部分,因为这两天小程序代码基本写完了,功能也基本实现完了,但团队有个同学跟我说小程序“很卡!”这问题可不小,自己测了一下,第一次扫码打开小程序,性能数据里的启动耗时,居然要4000多ms!再次打开小程序的启动耗时要2000多ms,还是有点慢了感觉,既然都说了卡,那就得改呜呜呜,不然用户体验不好,小程序写得再好看,在这个快时代,用户也会流失

常规

本来写小程序过程中就开启了LazyCodeLoading

image.png

"usingComponents": true,
"lazyCodeLoading": "requiredComponents"

图片

图片太大,但小程序展示区域又不用很大,就一定要压缩或者裁剪!!

图片的展示,尽量不要采用width:100%,height:100%,不然很容易拉伸图片,看起来也不好看

图片加载的时候类似掘金app的动画,缓慢加载,css实现如下

image.png

image.png 比较固定的可以用base64,减少加载图片的请求数据量

监听

除非必要,避免监听页面处理强度大的事件

比如页面滚动,收拾滑动

image.png

其他

页面预加载,这个明天研究一下

页面onLoad和onShow的利用

对缓存的操作尽量使用异步,不然运行时耗时也比较大

还有必要的提示,节流和防抖也都是比较基础的点

一些链接

微信小程序性能优化实践 | 微信开放社区 (qq.com)

开发 | 这 4 个绝招,让你的小程序告别卡顿,流畅如飞 - 腾讯云开发者社区-腾讯云 (tencent.com)

运行原理 | uni-app官网 (dcloud.net.cn)