小程序性能优化

最近开发小程序时涉及到了几千条数据同时处理的性能问题，就最近这次优化做一个记录

五点建议

1. 不要在for循环中使用setData

每一次setData都会导致小程序的视图更新（DOM回流），如果在for循环中对大量数据进行setData会导致严重的性能问题，实测几百条数据的循环就会导致严重卡死。‘

// 将
for(const i in this.data.list){
    setData({ ['list['+ i +']']: true })
}

// 转化为
for(const i in list){
    this.data.list = true
}
setData({ list: this.data.list })

可以参考 https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html

2. 在wx:for中使用组件时，不要在生命周期内处理数据

如果在生命周期内修改，首先created中修改无效，其次即使可以修改（如使用ready），当你有一千个组件时，将会触发一千次的DOM更新，这会导致一定的卡顿。

setData触发的更新虽然是在组件内的，但是会导致整个页面的DOM回流。

正确方式是使用observer在组件接受到数据还未挂载时做修改。

cardNo: {
    type: String,
    observer(newVal){
        this.setData({
            hideCard: newVal.replace(/^(.{4})(?:\w+)(.{4})$/,'\$1********\$2')
        })
    }
}

3. 对数据列表中的图片做懒加载

懒加载大家都不陌生，小程序的image标签提供了懒加载的能力。

lazy-load 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

<image src="..." lazy-load/>

4. 老生常谈之，减少HTTP请求

每一次的HTTP请求三次握手都会造成一定的性能损失，条件允许时可以考虑将多次请求合并，如果需要实时传输数据或是频繁操作推荐使用websocket。

5. 老生常谈之，大量数据做分页

对大量的数据做分页优化，在部分数据不使用不关心时可以使用后端分页，如果涉及大量数据操作，则可以使用前端分页方式或分批加载。

前端分页，即用户下拉后用向页面追加更多数据。

分批加载，即将一个完整的数据转为二维数组，每一次加载其中一个数组得数据。该方式可以解决setData的数据大小限制问题。