微信小程序性能优化总结

た入场券 2022-10-09 00:31 152阅读 0赞

# 渲染性能优化 #

## 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
    });

*  数据效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221005/93c2fb6e9f834f208fa3384d22a1eca7.png