antd 3.x Table组件怎么快速实现虚拟列表

“知识就是知识，运用知识才是力量。”

1. 前言

随着互联网的发展，web展示的内容越来越丰富，也越来越无穷。我们在实际开发中难免会遇到长列表数据渲染，而又不适合分页的业务场景，如果浏览器直接渲染海量数据，会造成页面卡死，严重时导致浏览器资源耗尽，直接崩溃掉。这种情况用户与产品是无法接受的，浏览器性能与业务需求产生了对立，因此虚拟列表技术被提出，为这种尴尬的场面提供了一线生机。

2. 虚拟列表

虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。假设有10万条记录需要同时渲染，我们屏幕的可见区域的高度为500px,而列表项的高度为50px，则此时我们在屏幕中最多只能看到10个列表项，那么在渲染的时候，我们只需加载可视区的那10条即可，触发页面滚动时，实时替换当前应该展示在页面中的10条数据。

它的名词解释由一张图来诠释，如下：

触发滚动后，可视区域内的数据变化：

1.首先，定义一个visibleHeight变量来保存我们可见区域的高度，作为内容容器，并设置为500px，visibleHeight = 500。
2.假设每列高度itemHeight固定，则可见区域内的数据条数visibleCount = Math.ceil(visibleHeight / itemHeight)。
3.由于只渲染可视区域内的数据，所以我们需要另一个占位容器，使父盒子出现滚动条，占位容器高度placeholderHeight = totalCount * itemHeight。占位容器替代了内容容器，撑出了滚动条，内容盒子则采用绝对定位脱离文档流。
4.每当触发滚动时，获取滚动条的滚动距离，计算出应该总共滚动了的数据条数，从而设置数据的开始索引startIdx = Math.floor(scrollTop / itemHeight)，而结束索引endIdx = startIdx + visibleCount。
5.如果是原生开发，则根据开始、结束索引去操作dom，替换dom。如果是vue或react都是数据驱动，则更新要