小程序白屏问题优化

小程序白屏问题优化

前景：

小程序的开发越来越成为很多公司发展必要的项目类型，很多公司都开始逐渐的开发小程序，对于2B的公司，小程序的页面相对来说比较简单，但是对于2C的公司，尤其是电商类型的公司，会希望小程序的功能能够与APP一致，那相对来说页面就会比较复杂，也会遇到很多渲染性的问题，比如我们之前小程序提审经常会因为白屏问题被拒。

经验：

我之前有做过微信小程序和百度小程序，相对于百度小程序，微信小程序的性能及兼容性会好很多，百度小程序的体验相对较差，白屏问题出现的几率也较高，但是在百度小程序中一些简单的页面也不会出现白屏问题，所以我们在平时的开发中也可以屏蔽一些消耗性能的操作，提高兼容性，减少页面出现问题的可能性。

方法：
要提高性能，非常重要的一个方面就是减少对运行内存的消耗，和APP一样，系统会限制每个小程序的运行内存，但是并没有说具体限制多少，我们可以通过以下方式避免过多的占用运行内存导致程序崩溃

1. 如果使用uniapp等小程序框架，尽量避免vuex中存放过多的数据，因为vuex中的数据是会放在小程序的运行内存中的，一直占用着运行内存资源，可能会因为运行内存不足导致页面卡顿设置崩溃
2. 不需要页面响应的数据不要放在data中初始化
3. 引用类型的变量使用过后或dom卸载时置为null或""，使内存可以回收，比如置空页面定时器，对dom元素的引用等
4. 小程序提供了监听内存不足告警的事件 API：wx.onMemoryWarning，可以告知开发者内存紧张。但开发者无法操作内存资源，顶多调用 wx.reLaunch 来清理页面栈，重新加载页面，来降低内存负荷。但开发者更应该仔细取收集告警信息上报到日志系统，分析并对程序做优化。
5. 避免频繁触发的事件重度内存操作，比如上拉加载，下拉刷新时间，屏幕的滚动事件增加节流
6. 长列表优化，对于类似于电商类型小程序会有很多的长列表，小程序提供了virtualList，开发者可以合理的使用

体验： 有时候性能或者网络不好，页面打开较慢，为提高用户体验，我们可以合理的使用骨架屏和错误提示页面，提高交互上的体验。