有这样一个需求，用户导入excel表格到页面中，前端用列表把它展示出来，并且支持列表中可以编辑数据。其实是一个很简单的需求啦，但是当用户导入的excel表格数据量过大的时候，前端页面就会很卡顿，以至于不能操作，应该如何优化呢？
有3种解决办法。
1. 我本地测试了一下，浏览器对纯文本列表展示支持还是很优雅的，一次性展示10000条数据也是支持的，并且不会卡顿。其实这样已经完全够用了。想要对列表中的数据进行编辑，可以将表单组件设置为单例模式，这样就可以解决问题了
2. 使用虚拟列表，只渲染可视区域的列表，这样也就可以直接用列表行表单，比第一种方式来的更直接，不过数据的使用维护会比较复杂
3. 使用插件啦，它是使用canvas画的表格，渲染极快，支持直接用列表行表单，对我来说这个更好用，Modern react data grid component - Glide Data Grid (glideapps.com)
虚拟列表我还是实现了一下，说一下个人的思路吧
<div class="wapper">
<div class="ghost">
<!-- 放置渲染数据 -->
<div class="item"></div>
</div>
</div>
1. 假设有两个div，一个div-wapper设置为可见区域的高度，一个div-ghost设置为总列表的高度
2. 监听div-wapper的滚动事件，根据scrollTop可以计算出当前可视区域渲染的内容
3. 将渲染的内容放到可视区域就好啦，通过设置div-ghost的css属性
