小程序性能优化

setData优化

工作原理

小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。

image

一维数组变二维数组

应用场景:向下滚动进行分页加载

错误姿势:每次请求5条,请求后利用 Array.prototype.concat 合并原来的数组,然后进行setData

1
2
3
4
//newList [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
this.setData({
newList: oldList.concat(newItem)
})

正确姿势:
使用二维数组

1
2
3
4
//newList [[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20]]
this.setData({
`newList[${row}]`: newItem
})

列表的局部更新

应用场景:在一个列表中,有n条数据,假如这个时候想对其中某一个数据进行点赞操作,还能及时看到点赞的效果

错误姿势:点赞完成之后,重新获取所有数据,setData再次进行全局重新渲染

正确姿势:将点赞的id传过去,知道点的是哪一条数据,重新获取数据,查找相对应id的那条数据的下标(index是不会改变的),用setData进行局部刷新,如此,便可以显著提升渲染速度。

1
2
3
this.setData({
list[index]=newList[index]
})

与渲染无关的数据不要放在data

与渲染无关的数据不要放在data,可以减少渲染线程的开销

不要频繁的setData

应用场景:pageScoll 中 根据滚动的高度进行setData操作

错误姿势:每次接受到滚动的通知,就进行setData,但是其实pageScoll事件并不是实时的,会有延迟,pageScoll事件,也是一次通讯,是webview层向js逻辑层的通讯。这次通讯开销较大,如果考虑到这个事件被频繁的调用,回调函数如果有复杂的setData的话性能就会变得很差。

images

正确咨询:
可以在原有的pageScoll回调事件的处理上,根据业务场景增加防抖或者节流