小程序性能优化的几个建议
发布时间:2020-08-22 11:09:59浏览次数:
关于微信小程序性能优化的一些方法,和大家分享一波~
01
控制代码包大小
1.开启开发者工具中的“上传代码时自动压缩”
2.及时清理无用代码和资源文件
3.减少代码包中的资源文件大小和数量
4.将资源文件放在CDN中
5.提取公共样式和公共组件
6.代码和图片压缩
02
分包加载
1.将小程序中不常用的页面放在多个分包内,主包只保留最常用的核心页面。
如启动页和tabBar页面,以及分包都需要用的公共资源脚本。
2.启动时只加载主包,使用时按需下载分包。
3.分包预加载——开发者预先配置页面可能会跳转到的分包,框架在进入页面后根据配置进行预加载。
03
运行机制优化
1.减少立即执行的代码数量
2.避免高开销和长时间阻塞代码
3.页面代码都写入页面的生命周期中
4.做好缓存策略
04
数据管理优化
首屏请求数量尽量少于5个,超过的可以做接口合并,对多次提交的数据可以做合并处理
05
首屏加载优化
1.提前请求:异步数据请求不需要等待页面渲染完成
2.利用缓存:利用storageAPI对异步请求数据进行缓存。二次启动时先利用缓存数据渲染页面,再进行后台静默更新。
3.避免白屏:先展示页面骨架和基础内容。
4.及时反馈:即时地对需要用户等待的交互操作给出反馈,避免用户以为小程序无响应。如点赞,先改变按钮样式,再发送异步请求。
06
渲染性能优化
1.避免不当使用setData
setData是逻辑层向渲染层的通讯,这个通信不是直接给webview,而是通过走了native层。在数据传输时,逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分,之后将数据发送给视图层。
同时,逻辑层还会将setData所设置的数据字段与data合并,使开发者可以用this.data读取到变更后的数据。
(1)使用data在方法间共享数据,data应只包含与页面渲染相关的数据。
(2)只传输页面中发生变化的数据,使用setData的特殊key实现局部更新
(3)短时间内频繁调用setData
(4)对连续的setData调用进行合并
(5)后台页面进行setData,抢占前台页面的渲染资源——页面切入后台的setData调用,延迟到页面重新展示时执行
(6)页面列表:使用懒加载+动态移除非可视区域范围内的内容。
(7)耗时较长的js做到异步
2.避免不当使用onPsgeScroll
(1)只在必要时监听pageScroll事件
(2)避免在onPageScroll中执行复杂逻辑
(3)避免在onPageScroll中频繁调用setData
(4)避免频繁查询节点信息(SelectQuery),部分场景建议使用节点布局相交状态监听(IntersetctionObserver)替代
3.使用自定义组件
4.canvas渲染
(1)分层绘制到不同canvas
(2)不变的部分单独绘制到一个canvas,动态生成的绘制到一个canvas,最后合入一个canvas
5.获取节点位置,用intersectionObject
08
建议
1.使用真机调试
2.开发工具在network里看不到图片资源的加载。要看图片懒加载,要设置微信开发工具的代理到127.0.0.1,通过charles抓包看到
3.改造setData,记录性能优化的提升
this._startTime=newDate().getTime();letfn=this.setData;this.setData=(obj={},handle='')=>{letnow=newDate().getTime();//上报渲染所需要的时间log(now-this._startTime)fn.apply(this,[obj,handle]);};
用这些方法,我的小程序瘦了很多。你也可以试试~
下一篇:南宁商城拼团购物小程序定制开发