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

五点建议

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的数据大小限制问题。


一个爱搞事情的前端,一个爱玩技术的程序员