懒加载性能问题？

Question

现在有一个下拉列表，需要渲染的数据为十几万条，每次渲染的时候都会很卡顿，我想优化渲染性能，考虑采用懒加载的形式，先对数据获取接口进行分页处理，每次在判断快滚动到底部的时候，再加载下一页数据，加载完成之后，拼接旧数据 + 新数据 组成要渲染的数据，再赋值给下拉框进行渲染，但是这种形式有一个问题是：当滚动到最后面的时候，这时候需要渲染的数据量也很多，会造成dom过多，页面性能也会有问题，请问我该如何优化？

Answer 1

virtual list 了解一下。react 可以用 https://github.com/bvaughn/react-virtualized vue 可以用 https://github.com/tangbc/vue-virtual-scroll-list

Answer 2

使用vue-virtual-scroller做虚拟列表:

https://www.npmjs.com/package/vue-virtual-scroller

Answer 3

关于大数量的列表展示，你可以做虚拟列表来优化性能，我在这里简单说下虚拟列表：它可以解决大批量dom渲染造成的性能消耗和卡顿问题，假如你每次在列表上只展示10条数据，此时总数有十几万条，每次滚动条向下滑动，最上面的一条被滚动隐藏后dom销毁，下面新增的一条展示，这样做你的画面每次只会展示10条数据，在此基础上，你可以做一个数据的缓冲，每次展示16条，上3条，下三条，这样数据就不会有卡顿现象，虚拟列表是一个懒加载的行为，只有你滑动的时候，才会对数据进行计算和渲染。关于虚拟列表，网上文章挺多的，你可以看看。