小程序性能优化

我们先来看看小程序官方性能指标，小程序官方针对小程序性能表现制订了权威的数值指标，主要围绕 渲染表现、setData 数据量、元素节点数 和 网络请求延时 这几个维度来给予定义（下面只列出部分关键指标）：

1. 首屏时间不超过 5 秒；
2. 渲染时间不超过 500ms；
3. 每秒调用 setData 的次数不超过 20 次；
4. setData 的数据在 JSON.stringify 后不超过 256kb；
5. 页面 WXML 节点少于 1000 个，节点树深度少于 30 层，子节点数不大于 60 个；
6. 所有网络请求都在 1 秒内返回结果；

1、渲染优化

1.1 setData操作优化

1.1.1 避免列表数据全局刷新、局部更新单条数据

this.setData({
  ['people[' + index + '].age']: 25
})

// 也可以写成这样
this.setData({
  [`people[${index}].age`]: 25
})

1.1.2 下拉加载更多避免直接使用concat或者push等方法

// 核心思想是使用二维数组的方式去存储列表，不过这样渲染时就需要渲染两层了
wx.request({
    url: 'test.php',
    success: res => {
        let Length = this.data.arr.length;
        that.setData({
            [`arr${Length}`]: res.data // res.data 每一页请求过来的数据
        })
    }
})

参考资料：
如何打造高性能小程序门户
小程序如何避免setData的列表数据过大