前端处理大量数据导致页面不能操作

Question

双越老师您好，我想请教您一个问题，前端页面在处理大量数据的时候大约几十万条，这个时候页面就会无法操作了，怎么样让他在处理数据的时候，不影响页面的操作

Answer 1

提问者 前端小鱼儿 2019-12-07 15:00:50

回复错位置了

Answer 2

双越 2019-12-07 14:53:58

首先，这种问题做前端的优化也是可以的，可以搜一下“虚拟长列表”。如果是 React 可参考 https://react.docschina.org/docs/optimizing-performance.html#virtualize-long-lists ，vue 应该也有相应的解决方案。—— 当然，这仅仅对列表，如果是其他结构如表格，那就得按照这个思路自己去折腾了。

其次，我想说的是，遇到这种问题，我们应该首先想的是：这个问题能否从产品角度调整一下？如这几十万条不是一页显示，而是分层级、分文件夹显示？—— 有时候产品需求调整一点点，开发就能节省很大的成本。

• 提问者 前端小鱼儿 #1

  好的，谢谢双越老师，你说的这个我先了解学习下，我问题说的可能不太清楚，这几十万条数据，是需要我格式化后直接导出成excel的，不需要直接展示，展示是通过分页展示，只是一开始查询时组装导出数据时比较慢，大约十几秒，页面不能操作，我想优化下，处理数据的时候不影响页面的操作