小程序性能与体验优化

优化主要体现在几个方面

1. 合理设置可点击元素的响应区域大小，比如按钮，按钮太小会导致用户点击失败，体验是很差的。
2. 避免渲染页面耗时过长，因为过长的渲染时间会让用户感觉卡顿。这时候就要检查当前渲染区域是否过大，如果过大就要响应减少
3. 避免执行脚本耗时过长，过长的脚本执行时间也会让用户感觉卡顿。这个时候我们应该去检查脚本逻辑是否有问题，优化脚本逻辑。
4. 对网络请求做必要的缓存以及避免多余的请求。
5. 不要引入未被使用的wxss样式。对于那些没有使用的代码，应该删除掉以减小小程序包的大小
6. 文字颜色和背景色搭配好，适宜的颜色对比度更方便用户阅读
7. 所有资源请求建议使用HTTPS,让我们的资源请求更安全
8. 不使用废弃接口，避免小程序运行异常
9. 避免过大的WXML节点数目。一个页面少于1000个WXML节点；节点数深度少于30层；子节点树不大于60个；
10. 避免将不可能被访问的到的页面打包到小程序里，尽量删除不使用的文件，总之就是尽量控制小程序包的大小。
11. 及时回收定时器。小程序中的定时器是全局的，不是随着页面绑定的，所以我们在后退进行销毁的时候，我们应该手动的去回收定时器

12. 避免使用:active伪类来实现点击态。因为滑动和滚动的时候，这个点击态是不会消失的，体验很差。要想实现点击态的效果，应该使用小程序中内置的hover属性来实现这样的功能；比如navigator组件默认是有点击态的，我们可以通过下边这样设置来取消它的点击态

    
    
    image.png
13. 在滚动区域可开启惯性滚动以增强体验；安卓手机上，默认有惯性滚动；IOS上要设置额外的样式-webkit-overflow-scrolling:touch
14. 尽量避免出现任何JavaScript异常。因为JavaScript异常可能导致应用交互无法进行下去。我们应该把所有的异常都处理掉，保证小程序的高可用性。
15. 所有请求响应正常。因为某些响应异常可能导致应用交互无法进行下去
16. 所有请求的耗时不应太久。比如请求时我们加的showLoading，用户会感觉当前是在请求中，而不是一个假死状态。如果真出现某个请求耗时非常长的情况，那我们应该去优化服务器处理逻辑，或者减小程序包的体积。
17. 避免短时间内发送太多的图片请求。因为如果在短时间内发起太多图片请求的话，可能触发浏览器并行加载的限制。可能导致图片加载的很慢。这样就需要用户一直等在那里。所以我们应该适量控制当前图片请求的数量。比如我们使用 iconfont字体图标，就是为了减少图片响应的请求，一定程度上也可以提升小程序的体验
18. 避免短时间内发起太多请求。因为有可能会导致小程序加载的很慢。应该适当控制请求数量。

setData

1. 避免setData的数据过大,不要超过1M(1024kb)
2. 避免setData的调用过于频繁，因为涉及到系统层对数据的转发，所以有可能导致到达视图层的数据并不是实时的。
3. 尽量避免将未绑定在WXML的变量传入setData。因为不需要显示在界面上的变量如果在data里定义，通过setData去设置，会走逻辑层到系统层到视图层的路径。这样会造成不必要的性能消耗。所以，对这种不显示在界面上的变量，我们应该把它定义在data的外边，把它当成普通的变量就可以了。