0531-55535673

合作意向表

您需要的服务

预算: 3-4千 5-8千 1-5万 5-8万 8万以上

 
小程序开发指南之性能优化?
2020-03-30

  将从代码层面和项目层面,聊一聊微信小程序的性能优化问题,希望有所帮助。也是自己最近的一个总结。(前置知识:微信小程序的视图层是WebView支持,逻辑层是JSCore支持,逻辑层通过setData与视图层发生交互。每一个页面都是一个WebView页面)济南小程序开发

  详见:小程序的运行环境

  下面的内容不论是使用Taro框架开发,还是微信小程序原生开发,都是适用的。

  代码层面

  拆分组件

  图片压缩

  减少不必要数据

  避免频繁setData

  使用webView组件开发

  项目层面

  拆分小程序

  分包预加载

  尽量升级版本库

  #代码层面

  通过代码细节提升性能,而且在这方面,空间是非常大的。对于比较早期的小程序项目,由于代码细节方面没有过多的考虑,也导致了开发出的小程序非常的消耗性能。下面将提到的一些点,不论是正在开发的项目,还是在维护的项目,都会有一定的帮助。

  · 拆分组件

  对于小程序的项目,由于野蛮式开发,不会太多的考虑组件拆分。当然对于关注组件开发的公司,肯定会在早期就做好一定的规划。做好组件的拆分,可以保证组件的复用,大量的减少重复的代码。(组件开发的思想,目前基本适用所有的前端开发项目)。如何有效拆分组件方法,详见[译] 你是如何拆分组件的?

  · 图片压缩

  在微信小程序项目中,不会在本地存放图片,基本都是网络图片,而网络图片的下载,需要消耗一定的时间和内存。较小图片的大小,可以提升小程序的渲染时间,减少内存的占用。通过CDN静态资源服务器获取图片资源,添加图片压缩规则,可以极大的提升性能。

  · 减少不必要数据

  减少data中的亢余数据。不必要数据,传入setData会造成不必要的性能消耗。建议:不要直接将接口数据全部保存在data中,只有页面需要渲染的 数据,才通过setData进行挂载,非必要的数据可以直接挂载在当前页面page的this上。

  let data = {

  list: [item, item, item, item, item],

  title: "xxxx",

  path: 'xx/xx/xx'

  }

  复制代码

  // 不好的处理

  this.setData({

  data: data

  })

  // 好的处理 只挂载必要参数

  this.setData({

  dataList: data.list

  })

  this.title = data.title

  this.path = data.path

  复制代码

  · 避免频繁setData

  // 不好的处理

  this.setData({

  count: 1

  })

  this.setData({

  count: 2

  })

  this.setData({

  count: 3

  })

  复制代码

  三次setData会被全部触发嘛?是的,会被全部调用。

  在微信小程序中,并不像react,把多次操作合并。每次setData的过程,就是一次JSCore逻辑层 和 webView视图层的交互。过多的交互,会降低小程序的用户体验。例如 滑动监听滚动,操作setData,非常的消耗性能,可以考虑使用节流函数,降低调用频率。

  官方给出的说法是:setData接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。来修改一下上面的代码。

  // 好的处理

  let data = { count: 1 }

  data.count = 2;

  data.count = 3;

  this.setData(data)

  复制代码

  · webView组件开发

  灵活性非常强的页面,同时需要多端使用,建议使用微信小程序提供的webView组件,套用h5页面进行页面开发,避免重复开发。当微信小程序包过大之后,也建议使用h5页面替换开发。详见webView 组件

  

  复制代码

  #项目层面

  通过微信小程序项目配置来提升加载性能,下面的方案可以有效的解决问题,不过也要试情况而定。

  · 拆分小程序

  在包过大的情况下下,可以进行小程序包的拆分,详见:分包加载。对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。如果业务庞大,也可以单独抽离一个新的小程序。

  · 分包预加载

  采用分包配置之后,分包加载也是需要时间的。对于一些比较常用,或者比较重要的页面,可以采取分包预加载的手段,来完成分包的提前下载,减小分包载入的时间。

  详见 分包预下载

  · 尽量升级版本库

  注意基础版本库的问题,在合适的前提下升级版本库,尽量将版本库升级为最新版本。因为版本库升级为最新,可以有效避免很多问题。

  吐槽:目前随着各大公司业务的不断迭代,小程序的体积不断真大,小程序渐渐的不在小。希望尽量的让小程序小起来,发挥它小的作用。希望以上内容可以帮到你。

 
阅读下一篇
如何区别机构网站和企业官方网站
 
 
推荐阅读
微信小程序怎么复制链接 技术方法帮你解决
APP开发外包的好处
网站优化中你是否犯了这些错误
网站建设中,弹出框该怎样设计?弹出框为什么存在?
拼团小程序如何开发?
小程序开发三大核心原则有哪些?
 
准备开展业务?
联系专业的商务顾问,诊查网站现状及关键词、分析竞争对手的流量、一对一咨询、及其报价详情
嘿,我来帮您!