element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题

当页面数据过多，前端渲染大量的DOM时，会造成页面卡死问题，使用分页或则懒加载这些方案也无法解决，这些处理方法在页面加载到足够多的数据的时候，随着页面追加渲染的DOM越来越多，也会导致页面卡顿，甚至卡死。
这时候我们可以把两个方案中和一下，既然在有限的视窗中我们只能看到一部分的数据，那么我们就通过计算可视范围内的单元格，这样就保证了每一次拖动，我们渲染的 DOM 元素始终是可控的，不会像数据分页方案怕一次性渲染过多，也不会发生无限滚动方案中的老数据堆积现象。所以就有了虚拟滚动这一方案。

虚拟滚动

接下来我们用一张图来表示虚拟滚动的表现形式。

根据图中我们可以看到，无论我们如何滚动，我们可视区域的大小其实是不变的，那么要做到性能最大化就需要尽量少地渲染 DOM 元素，而这个最小值也就是可视范围内需要展示的内容，也就是图中的绿色区块，在可视区域之外的元素均可以不做渲染。

那么问题就来了，如何计算可视区域内需要渲染的元素，我们通过如下几步来实现虚拟滚动：

• 每一行的高度需要相同，方便计算

• 需要得知渲染的数据量（数组长度），可基于总量和每个元素的高度计算出容器整体的所需高度，这样就可以伪造一个真实的滚动条

• 获取可视区域的高度

• 在滚动事件触发后，滚动条的距顶距离也可以理解为这个数据量中的偏移量，再根据可视区域本身的高度，算出本次偏移的截止量，这样就得到了需要渲染的具体数据

• 如果类似于渲染一个宽表，单行可横向拆分为多列，那么在X轴上同理实现一次，就可以横向的虚拟滚动

效果如图：

---

使用虚拟列表做投屏功能
投屏页面 buletinFullscreen.vue

引入投屏页

element表格组件实现虚拟滚动，解决卡顿问题
「前端进阶」高性能渲染十万条数据(时间分片)