微信小程序性能与体验优化

1. 合理的设置可点击元素的响应区域大小；

比较常见的是页面的点击按钮太小，用户点击不到按钮，这样用户体验很不好。

2. 避免渲染页面耗时过长；

当页面渲染时间过长的话，会让用户感觉非常卡顿，当出现这种情况时，我们应该检查一下当前渲染的页面是不过大。

3. 避免执行脚本耗时过长；

执行脚本耗时过长，用户也会感觉到非常卡顿，体验非常不好，如果出现这种问题，我们应该检查一下脚本的执行逻辑是否有问题，需要对脚本的执行逻辑进行相关的优化。

4. 对网络请求做必要的缓存以避免多余的请求；

当每次从小程序从服务端去请求接口时，都会让用户有一个等待的时间，如果等待的时间过长，也会造成非常不好的体验，所以我们应该尽量避免多余的请求，另外针对多次请求的相同数据，我们应该对数据做相应的缓存。

5. 不要引入未使用的WXSS样式；

小程序里未使用的样式应该删除掉，以避免小程序打包体积过大，影响用户加载小程序的速度。

6. 文字颜色与背景色搭配要好，适宜的用户对比度更方便用户阅读；

小程序的界面建议有专业的美工进行颜色搭配。

7. 所有资源请求都用HTTPS；

小程序在上线后的接口地址必须是HTTPS的，否则无法正常请求；

8. 去掉官方废弃的API和接口；

小程序在不断更新中，有些API和接口会逐渐废弃，特别是获取用户信息的相关功能，现在已经全面废弃了，所以要特别注意；

9. 避免过大的WXML节点数目，一般应遵循以下规则：

(1). 一个页面少于1000个WXML节点；

(2). 节点树深度少于30层；

(3). 子节点树不大于60个；

10. 避免将不可能访问到的页面打包在小程序里；

小程序在开发过程中，可能会写一些临时页面在项目里面，比如一些Demo示例，在小程序在打包上传时，应将无用的页面删除掉，以减小小程序包的体积。

11. 及时回收定时器；

小程序中的定时器是全局的，它并不会随着页面的销毁页消失，所以当页面消毁时需要手动清除定时器。

12. 避免使用:active伪类来实现点击状态；

对于需要加上点击态的地方可以使用navigator标签来实现；

13. 滚动区域可开启惯性滚动以增强体验；

在安卓手机上，默认的惯性滚动功能，而在IOS手机上面，需要加上如下样式才能开启惯性滚动功能。

-webkit-overflow-scrolling:touch

14. 避免出现JavaScript异常；

如果小程序出现JavaScript异常，会导致小程序的交互出现异常，影响用户体验。

15. 所有的响应正常；

小程序的响应如果异常，页面会一直处于加载状态中，用户无法正常使用。

16. 所有请求的耗时不能太久；

小程序的请求如果耗时太久，会导致用户体验不好，特别是一些用于投流的小程序，用户首次打开的速度特别重要。

17. 避免短时间内发起太多的图片请求；

如果在短期内加载很多的图片会导致触发并行加载，这样就会加载的很慢，多图片加载时一定要使用懒加载功能。

18. 避免短时间内发起太多的请求；

小程序短时间加载太多的请求会比较耗时，用户等待过久会影响用户体验。

19. 避免setData的数据过大；

执行 setData操作时，逻辑层会把数据传给系统层，系统层然后再传给视图层，这种层层传递对数据的大小的严格的要求，数据不能超过1MB。

20. 避免setData的调用过于频繁；

频繁的调用setData时，数据从逻辑层到达视图层时，可能无法实时的发生改变。

21. 避免将未绑定的WXML的变量传入setData；

在data中存放的变量在更新时会触发页面刷新，对于与视图无关的变量应该存在页面之外。