懒加载性能问题？

作者站长头像
站长
· 阅读数 22

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

回复
1个回答
avatar
test
2024-06-23

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容