javascript - 基于Electron IM消息列表滚动优化方案？

Question

技术栈：Electron React 开发的IM应用
问题：消息列表可能会有几万条消息，每个消息是一个div块，目前优化方向：

1. 几万条数据时候保持最多渲染2000条消息
2. 向上滚动加载历史数据卡顿体验减少

想知道的事：有没有大神做过这方面的优化，或者说有什么好的优化思路，感谢不吝赐教

Answer 1

两千条都太多了。虚拟列表，展示一屏幕+上下半屏幕。

左侧会话列表用定高列表，右侧消息列表用不定高列表。

不定高列表，可以把图片的宽高做持久化，体验会更好

---

可以看一下虚拟列表就是标准的大数据处理方案。十万条都没问题（当然真实的消息列表 dom 比这个会更复杂，但是真实 dom 也不会多太多）

---

https://github.com/react-component/virtual-list

---

我之前写过的一些 im 相关的前端问题，可以关注一下 https://segmentfault.com/q/1010000043560447 ， 如果有我没提到的可以再问我。