微信小程序性能优化

一、对于节点数大于1000的:

1、对于页面里面的标签,能用text的,就不用view;

2、能直接用文本的,就不用text标签;

3、对于一些循环渲染的列表,能用block标签的,就不要浪费一些view标签;

总: 视图代码优化的小技巧

1、使用wxml标签要克制,能不用容器标签就不用,能少用就少用;

2、默认以catch替代bind绑定事件,自定义的data数据属性中永远只存储基本数据类型,且只存储小数据;

3、动态渲染的列表,一定要绑定一个唯一的wx:key;静态渲染的可以使用index;

4、对于scroll高频事件要节流,使用节流函数throttle;

5、对于用户的单击事件,可以适当使用防抖函数debounce。

二、wxss优化

1、开启惯性滚动:

2、清除wxss无用代码

WXSS 优化技巧 | 微信开放社区

使用gulp工具和gulp-cleanwxss插件

注: 由于工具不完善,只能针对于静态的wxss。可能会误删动态的wxss代码。

三、UI交互优化技巧

1、使用padding改变点击区域大小;

2、使用伪元素改变单击区域大小;

四、脚本优化技巧

1、定时器是异步线程里的东西,在离开页面时一定要销毁;在页面的生命周期函数pageLifeTimes里面销毁。

2、使用wxx.onXXX全局绑定一定要小心,有一个监听必须有一个反监听;

3、使用全局对象要小心;在生命周期函数detach上需要做相关操作。

4、使用this对象要谨慎。

五、setData调用优化

1、不要多次分开调用setData,尽量合并调用;

2、不准备渲染的数据不要放在data对象中;所有需要触发视图更新的才需要放在data里面。

3、通过index局部更新长列表数据;

注:调用update方法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值