# 前言
在工作中,有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况,对于此,我们称这种列表叫做长列表。比如,在一些外汇交易系统中,前端会实时的展示用户的持仓情况(收益、亏损、手数等),此时对于用户的持仓列表一般是不能分页的。
在高性能渲染十万条数据(时间分片) (opens new window),提到了可以使用时间分片的方式来对长列表进行渲染,但这种方式更适用列表项的DOM结构十分简单的情况。本文会介绍使用虚拟列表,来同事加载大量的数据
# 为什么使用虚拟列表
假设我们的长列表需要展示10000条记录,我们同时将10000条记录渲染到页面中,先来看看需要多长时间
<button id="button">button</button><br/>
<ul id="container"></ul>