小程序白屏问题优化
前景:
小程序的开发越来越成为很多公司发展必要的项目类型,很多公司都开始逐渐的开发小程序,对于2B的公司,小程序的页面相对来说比较简单,但是对于2C的公司,尤其是电商类型的公司,会希望小程序的功能能够与APP一致,那相对来说页面就会比较复杂,也会遇到很多渲染性的问题,比如我们之前小程序提审经常会因为白屏问题被拒。
经验:
我之前有做过微信小程序和百度小程序,相对于百度小程序,微信小程序的性能及兼容性会好很多,百度小程序的体验相对较差,白屏问题出现的几率也较高,但是在百度小程序中一些简单的页面也不会出现白屏问题,所以我们在平时的开发中也可以屏蔽一些消耗性能的操作,提高兼容性,减少页面出现问题的可能性。
方法:
要提高性能,非常重要的一个方面就是减少对运行内存的消耗,和APP一样,系统会限制每个小程序的运行内存,但是并没有说具体限制多少,我们可以通过以下方式避免过多的占用运行内存导致程序崩溃
- 如果使用uniapp等小程序框架,尽量避免vuex中存放过多的数据,因为vuex中的数据是会放在小程序的运行内存中的,一直占用着运行内存资源,可能会因为运行内存不足导致页面卡顿设置崩溃
- 不需要页面响应的数据不要放在data中初始化
- 引用类型的变量使用过后或dom卸载时置为null或"",使内存可以回收,比如置空页面定时器,对dom元素的引用等
- 小程序提供了监听内存不足告警的事件 API:wx.onMemoryWarning,可以告知开发者内存紧张。但开发者无法操作内存资源,顶多调用 wx.reLaunch 来清理页面栈,重新加载页面,来降低内存负荷。但开发者更应该仔细取收集告警信息上报到日志系统,分析并对程序做优化。
- 避免频繁触发的事件重度内存操作,比如上拉加载,下拉刷新时间,屏幕的滚动事件增加节流
- 长列表优化,对于类似于电商类型小程序会有很多的长列表,小程序提供了virtualList,开发者可以合理的使用
体验: 有时候性能或者网络不好,页面打开较慢,为提高用户体验,我们可以合理的使用骨架屏和错误提示页面,提高交互上的体验。