聊天功能频繁刷新导致页面卡顿-我爱小程序

问题模块	框架类型	问题类型	API/组件名称	终端类型	微信版本	基础库版本
API和组件	小程序	Bug	setData	客户端	6.7.2	2.3.0

加数据是单条的setData，不是setData整个数组，是不是代表逻辑层只会传变化的数据过去渲染，这样即使早期有很多数据也不影响？....我们直播间有聊天和送礼的功能，

我们直播间有聊天和送礼的功能，

当有大量的聊天消息短时间出现时，会导致整个直播间卡顿，下面的功能按钮点击无反应，过一段时间才有反应，且十分卡顿

page({

data: {

chatMsg: [] // 存放聊天消息的数组

}

})

目前我的做法是：

添加消息到data中的消息数组时，setData只更新新消息部分：

this.setData({

[`chatMsg[${len}]`]: val

})

而setData的频率也有限制，在有大量消息过来的时候，我这边限制1s才setData一次，但这一次setData的数据可能有几十条：

this.setData({

[`chatMsg[3]`]: val，

[`chatMsg[4]`]: val，

[`chatMsg[5]`]: val，

[`chatMsg[6]`]: val，

[`chatMsg[7]`]: val，

[`chatMsg[8]`]: val，

.

[`chatMsg[99]`]: val

})

在这些大量消息涌进来的时候，我点击直播间底部的聊天按钮，礼物按钮都是点击无反应。等这些大量消息停止涌入时，我的点击才有反应

请教下官方和其他朋友们，如何优化这部分呢？做到即使大量消息进来，也不会把直播间卡死操作不了

待确定的方案：

需不需要在data的chatMsg已经有大量数据后，删除一部分早期的数据？
因为我增加数据是单条的setData，不是setData整个数组，是不是代表逻辑层只会传变化的数据过去渲染，这样即使早期有很多数据也不影响？
....

后米米米米：

建议这样，定义一个全局的数组存所有消息（这个不要setData），然后定义一个当前显示的消息数组，每次有更新就动太计算这部分内容，计算完之后再将这个setData（覆盖）进去页面中。

因为你页面中同一时间最多只能显示一部分数据。不要往setData中放太多数据

smy：

测试了下如果把chatMsg中的早期消息进行清除，然后再setData，两者的卡顿情况时不同的。如果每次都是把chatMsg整个数组进行setData, 同时保证chatMsg数组长度最多6条，这时候来大量消息时，会好很多，可以点开下面的功能栏，但也是稍微有些卡顿延迟。

是不是说明即使我们对数组中的某一个元素进行setData更新时，逻辑层也是把整个数组数据传到渲染层，然后渲染层也是渲染了整个数组数据？

卢霄霄：

慢慢显示呗。。每1秒弄成最多setData 10条

聊天功能频繁刷新导致页面卡顿