el-table表格数据量大渲染慢优化

一、业务场景

项目中有个表格数据展示页，采用el-table，很BT的不用分页，三千条数据就卡出翔。

二、 问题分析

document.querySelectorAll('*').length

用上面这个代码一测试，好家伙，几万个dom，这不卡才怪呢。

dom节点数量过多是一方面，还有就是，事件注册，这也是会消耗内存的。

三、 问题解决

接下来就从dom节点数量和事件注册上去想办法解决问题。

首先，把表格分为两个大类：

① 简单表格  （基本上就是数据展示，最多有一些排序或者少量简单的事件处理功能）

② 复杂表格  （复杂的表格展示比如树形、可编辑单元格）

对于简单表格，我们可以弃用UI组件，拿el-table来说，此类复杂功能组件封装势必会产生大量dom，对于简单数据表格，完全是多余的开销。我们可以直接用table去渲染。而对于排序、单复选、删除功能等简单逻辑，可以通过【事件委托】去优化。（事件委托如果不明白请自行百度）

对于复杂表格，简单粗暴的推荐使用史上最强表格插件 ag-grid 。

最后补充一点，网上还有一些优化方案，比如可视区加载，确实也很不错，但有个缺点，就是和复选框结合时，状态无法存储。