前端遇到大量数据(尤其是大数据表)的DOM 渲染时,通常会卡顿,需要考虑优化性能问题,这里针对DOM 渲染引出“虚拟滚动”方案, 详细请在以下各文章中详细了解:
vue插件 vue-virtual-scroll-list解决数据量太大问题: (优化Element UI的el-select组件)
https://www.cnblogs.com/yuwenjing0727/p/18129844
vue-virtual-scroller的使用,展示巨量数据,长列表优化,虚拟列表:
https://blog.csdn.net/muzidigbig/article/details/132135898
无缝滚动 vue-seamless-scroll 滚动表格: (结合el-table)
https://blog.51cto.com/u_12881709/5959345
miniUI的datagrid控件本身也为大数据表格提供了“virtualScroll”和“virtualColumns”属性实现虚拟滚动:http://www.miniui.com/docs/api/index.html#ui=datagrid
virtualScroll | Boolean | 是否虚拟滚动。当显示的数据超过500以上时,请设置此属性,能极大提升性能。 |
virtualColumns | Boolean | 是否虚拟滚动列,在列较多时有用,提高性能。 |
其实了解了原理,可以借助针对对第三库的辅助,也可以自己根据需要自己实现相应优化,以下文章是针对“虚拟滚动”的讲解,感兴趣可详读:
技术分享| 前端性能优化——虚拟滚动(Virtual Scroll)
https://www.modb.pro/db/122781
题外,这里再推荐一款基于Vue的高性能前端表格组件——Surely Vue Table(S-Table)
https://www.surely.cool/doc/guide#%E7%AE%80%E4%BB%8B