微信小程序性能优化总结

渲染性能优化

setData优化

不过于频繁调用setData，将多次setData合并成一次调用

// 不要频繁调用setData
this.setData({ a: 1 })
this.setData({ b: 2 })
// 绝大多数时候可优化为
this.setData({ a: 1, b: 2 })

与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  // 不要设置不在界面渲染时使用的数据，并将界面无关的数据放在data外
  this.setData({
    myData: {
      a: '这个字符串在WXML中用到了',
      b: '这个字符串未在WXML中用到，而且它很长…………………………'
    }
  })
  // 可以优化为
  this.setData({
    'myData.a': '这个字符串在WXML中用到了'
  })
  this._myData = {
    b: '这个字符串未在WXML中用到，而且它很长…………………………'
  }
},

/**
 * 生命周期函数--监听页面初次渲染完成
 */
onReady: function () {
  console.log(this._myData);
},

长列表性能优化

• 优化前

let list = [...collectList, ...data.list];
this.setData({
	list
})

• 可以看到优化后，每次仅set 新增数据，而不是对整个List，然后又每次重新setData()

this.setData({
   ["collectList[" + (meta.page - 1) + "]"]: {
     list,
     index: meta.page - 1
   },
   "meta.hasMore": length < total,
   "meta.isLoading": length < total,
   weakEmpty: false,
   loadingOk: true,
   loading: false
});

<blcok wx:for="{{list}}" wx:key="index1" wx:for-item="list" >
    <block wx:for="{{list.list}}" wx:key="index2" >
    ...
    </block>
</block>

• 数据效果