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

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

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

  1. 避免渲染页面耗时过长;

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

  1. 避免执行脚本耗时过长;

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

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

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

  1. 不要引入未使用的WXSS样式;

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

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

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

  1. 所有资源请求都用HTTPS;

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

  1. 去掉官方废弃的API和接口;

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

  1. 避免过大的WXML节点数目,一般应遵循以下规则:

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

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

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

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

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

  1. 及时回收定时器;

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

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

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

  1. 滚动区域可开启惯性滚动以增强体验;

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

-webkit-overflow-scrolling:touch

  1. 避免出现JavaScript异常;

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

  1. 所有的响应正常;

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

  1. 所有请求的耗时不能太久;

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

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

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

  1. 避免短时间内发起太多的请求;

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

  1. 避免setData的数据过大;

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

  1. 避免setData的调用过于频繁;

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

  1. 避免将未绑定的WXML的变量传入setData;

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

相关推荐
计算机毕设指导612 小时前
基于微信小程序的校园物品租赁与二手交易系统【源码文末联系】
spring boot·mysql·微信小程序·小程序·tomcat·maven·intellij-idea
计算机毕设指导613 小时前
基于微信小程序的水上警务通系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
李慕婉学姐17 小时前
【开题答辩过程】以《基于uni-app框架的助学管理系统的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
微信小程序·uni-app
爱吃的强哥17 小时前
uni-app 开发微信小程序注意点
微信小程序·小程序·uni-app
计算机毕设指导61 天前
基于微信小程序的鸟博士系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
周杰伦fans1 天前
微信小程序信息提示组件大全
微信小程序·小程序
QQ_21696290962 天前
Spring Boot大学生社团管理平台 【部署教程+可完整运行源码+数据库】
java·数据库·spring boot·微信小程序
风月歌2 天前
基于微信小程序的学习资料销售平台源代码(源码+文档+数据库)
java·数据库·mysql·微信小程序·小程序·毕业设计·源码
多仔ヾ2 天前
微信小程序开发实战之 05-微信小程序常用 API(下)
微信小程序
半兽先生2 天前
微信小程序与web-view页面双向通信
前端·微信小程序·小程序