页面渲染标签过多时会卡顿，一般表格数据过多时会很卡。如果选择分页就不用讨论了，这里只讨论滚动的情况。解决方法很简单，就是将页面中没有显示的元素从页面中删除。最难的一点是滚动条的处理。这里有一些详细的想法。以上下滚动为例。将表格的每一行上下滚动到固定高度，一次获取所有数据。每一行的高度不固定，所有的数据都是一次性取出来的。每行的高度不固定，数据是分批获取的。一、布局如下：当只显示可见区域的内容时，需要删除overflow标签，但是删除后滚动条会发生变化甚至消失，所以可以加上padding-top和padding-底部模拟内容高。第一类，所有数据都可以根据计算得到。需要一个scrollTop对应的展示数据对照表。当滚动条的位置发生变化时，去对照表查看要显示的数据，然后进行渲染。当然并不是每个scrollTop都会生成对照表，只需要在一定范围内生成即可，例如：[{2000:显示数据},{5000:显示数据}]（分别代表0-2000和2000-5000分别是data)比较第一个大于scrollTop的数据，得到它的值，就是要显示的数据。*这里需要注意的是，显示的数据必须有重复，重复可以占满屏幕，避免出现第二类空白，难以计算。例如，如果某个格子中的内容过多，则整行的高度会增加。隐藏标签（不透明度：0）可用于循环渲染每一行并获取该行的高度。这种方法简单易行，但是在计算渲染数据时，保证画面不出现空白的计算就有点复杂了。渲染隐藏标签时，使用批量渲染，比如每次渲染10行，使用requestAnimationFrame、setTimeout或者promise进行处理，以免卡死。第三类只知道当前数据，无法计算总高度。可以使用类似于第二种的方法，利用隐藏标签计算每一行的高度，最后计算得到的数据的总高度。当滚动条滚动到某个值时，触发后续的数据采集。同理，重新计算总高度。所有的方法都有一个前提，就是每一行数据的渲染都是同步的。在某些情况下，先渲染框架，然后在获取数据后填充框架。这种类似表格的布局会很麻烦。需要设置一个回调函数，获取所有数据渲染完成后的高度。其他的优化，如果是vue，可以使用Object.freeze()冻结只需要展示的数据。
