el-table表格数据量大渲染慢优化
一、业务场景
项目中有个表格数据展示页,采用el-table,很BT的不用分页,三千条数据就卡出翔。
二、 问题分析
document.querySelectorAll('*').length
用上面这个代码一测试,好家伙,几万个dom,这不卡才怪呢。
dom节点数量过多是一方面,还有就是,事件注册,这也是会消耗内存的。
三、 问题解决
接下来就从dom节点数量和事件注册上去想办法解决问题。
首先,把表格分为两个大类:
① 简单表格 (基本上就是数据展示,最多有一些排序或者少量简单的事件处理功能)
② 复杂表格 (复杂的表格展示比如树形、可编辑单元格)
对于简单表格,我们可以弃用UI组件,拿el-table来说,此类复杂功能组件封装势必会产生大量dom,对于简单数据表格,完全是多余的开销。我们可以直接用table去渲染。而对于排序、单复选、删除功能等简单逻辑,可以通过【事件委托】去优化。(事件委托如果不明白请自行百度)
对于复杂表格,简单粗暴的推荐使用史上最强表格插件 ag-grid 。
最后补充一点,网上还有一些优化方案,比如可视区加载,确实也很不错,但有个缺点,就是和复选框结合时,状态无法存储。
评论已关闭。