基于Electron IM消息列表滚动优化方案？-灵析社区

明道

技术栈：Electron React 开发的IM应用 问题：消息列表可能会有几万条消息，每个消息是一个div块，目前优化方向： 1. 几万条数据时候保持最多渲染2000条消息 2. 向上滚动加载历史数据卡顿体验减少 想知道的事：有没有大神做过这方面的优化，或者说有什么好的优化思路，感谢不吝赐教

阅读量：11

点赞量：0

问AI
两千条都太多了。虚拟列表，展示一屏幕+上下半屏幕。 左侧会话列表用定高列表，右侧消息列表用不定高列表。 不定高列表，可以把图片的宽高做持久化，体验会更好 *** 可以看一下虚拟列表就是标准的大数据处理方案。十万条都没问题（当然真实的消息列表 dom 比这个会更复杂，但是真实 dom 也不会多太多） "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/b19b6edab449cae47b27ea1da0dc503b.png) *** "https://github.com/react-component/virtual-list" (https://link.segmentfault.com/?enc=jFwsoj%2B1esjpdae8jEPSmQ%3D%3D.gaUT2NdJ8KokHavDqkClcKUbnVMw5QuV9Agrp56WJz2K2R7mNi22hYm2KzySH%2BHu) *** 我之前写过的一些 im 相关的前端问题，可以关注一下 "https://segmentfault.com/q/1010000043560447" (https://segmentfault.com/q/1010000043560447) ， 如果有我没提到的可以再问我。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/0e1f28dca0fa442e4e744ce96ee78b5c.png)