小程序常见问题整理

如上图，小程序框架中数据绑定的原理示意图，js是一个独立的线程，对数据操作后需要经过线程通信，将数据发送给webview 渲染引擎，最终呈现出效果。线程间通信就会暴露两个缺陷：1. 频繁操作会导致通信阻塞 2. 单次通信传递数据量多大，会导致通信长时间被占用，进而导致通信阻塞

优化建议：

1.对一个数组进行增加数据时只对push或者concat的数据进行setData，以减小setData传递的数据量，减少通信时间

let arr = [1, 2, 3, 4, 5]
const self = this
this.setData({
    arr: arr
})
// bad
setTimeout(() => {
    let arr_data = self.data.arr
    arr_data.push(6)
    self.setData({
        arr: arr_data
    })
}, 1000)
//good 通过数组操作下标的方式，操作数据绑定
setTimeout(() => {
    let data_arr = self.data.arr
    let data = {}
    let length = data_arr.length
    data[`arr[${length}`] = 6
    self.setData(data)
}, 1000)

2.避免连续多次调用setData，能够合并的，尽量合并调用

//bad
this.setData({
    data_1: 10
})
this.setData({
    data_2: 100
})
this.setData({
    data_3: 1000
})

//good
this.setData({
    data_1: 10,
    data_2: 100
    data_3: 1000
})

3.避免后台态页面进行 setData，对于用户看不到的页面，尽量不要继续频繁操作setData，比较影响展示页面的交互效果