el-table 性能优化

在开发过程中，发现⼀个⻚⾯，有⼤量的横向表格数据。导致⻚⾯卡顿严重。⻚⾯中 DOM 元 素过多，导致渲染及其缓慢。

之所以会导致卡顿，因为⻚⾯元素过多。

推荐使用：JavaScript Data Grid: Documentation（插件ag-grid）

 横向滚动，⽐纵向滚动渲染时间更⻓。因为 element ui 对于 el-table 的设计，上⾯表头部 分是⼀个table，下⾯body部分也是⼀个table。 纵向滚动，可以分⻚。横向滚动，分⻚就不好⽤了。 因此采⽤虚拟滚动模式。

什么是虚拟滚动

⼀般的滚动，给⼀个固定⾼度，超出内容，就会展⽰滚动条，可以滚动。 虚拟滚动其实没有滚动，只是通过监听滚轮向上或向下滚动距离，计算当前要显⽰ 的内容列表的索引。因此，渲染的只是视⼝+缓冲部分，元素要少很多。

如上图，我们只渲染可视区域能⻅到的3，4，5，6这⼏个元素，⽽其他的都不会被渲 染。

模拟滚动

由于只渲染“看得⻅”的部分，因此是没有原⽣滚动功能的。需要取模拟滚动⾏为。在⽤ 户滚动滑轮或者划动屏幕时，相应的根据滚动距离， “滚动”内容列表。（⾮真正的滚 动，根据滚动位置重新渲染可⻅的列表元素）。 当这个操作时间跨度⾜够⼩时，它看起来就像是在滚动⼀样。 

这有点像我们在画帧动画⼀样，每次⽤户滑动造成偏移量改变，我们都会根据这个偏移 量去渲染新的列表元素。就像是在⼀帧⼀帧的播放动画⼀样，当两帧间隔⾜够⼩时，动 画看起来就会很流畅，就像是在滚动⼀样。 

横向滚动 

横向普通滚动

横向普通滚动

横向虚拟滚动

纵向滚动 

纵向普通滚动

 纵向虚拟滚动