虚拟列表 virtual-list-demo

前言

在极特殊的场景下， 我们需要将 大量数据 不分页的渲染在列表上。一次性渲染所有数据会导致页面卡顿，甚至浏览器崩溃。

将全部数据渲染到列表中是无用且浪费的行为，只需要根据用户的视口进行部分渲染即可，所以使用到虚拟列表技术。

虚拟列表的原理

虚拟列表的原理是只渲染当前视口可见的部分数据，并根据用户的滚动操作实时更新渲染。

渲染的部分叫缓冲区 不渲染的部分叫虚拟区，缓冲区的大小和视口大小相同，虚拟区的大小根据数据量动态变化。

当用户滚动时，只需要将虚拟区的位置更新即可，而不需要重新渲染整个列表。