包含20万条数据量的单页长列表性能优化

#1

用 electron + react + redux 开发的桌面股票交易系统，渲染在单页表格中，交易时间段内，每秒大概会更新 20 条数据（可能是新增的数据，也可能是更新数据），用 react-reselect 做了相关优化，表格每一列支持排序功能。。

应用启动一两个小时后，界面会有明显的卡顿，并且订单达到 十几万时，重新启动应用，开始也会很卡，所以性能瓶颈很明显。。。
请问在该技术栈下针对这种业务场景，有没有比较好的方案，是否可以将订单数据存进内存数据库中，而不影响 UI 更新。。。

#2

只渲染出现在列表视口中的条目，其他未展示出来的条目根据其是否出现在视口中进行动态渲染或销毁，部分即将展示的数据也可以渲染

数据量太大造成内存使用过多，store里面只存储视口展示的数据以及该视口上下部分即将展示的数据，可设置store中存储列表数据的条数上限，当达到上限后优先更新替换最长时间为展示的数据(即数组的尾部)。 所有数据可存储在db中，每次根据视口展示数据的变化进行新数据的读取，以及更新store中的数据

#3

试试这个？https://juejin.im/post/5af03345f265da0b7964cf50
核心思想: 只加载可见区域的组件

#4

参照vs code 解决vs code内置的terminal的办法，直接将渲染方式换成canvas绘制的方式吧， 这样子还可以用到机器的GPU加速， 其他的方式估计都无解， 因为金融交易的数据量及时效性都很高， 其他的的客户端都是使用的C++实时绘制的。