浅析虚拟列表高性能渲染大体量数据原理

　在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。

　　在浅析如何利用时间分片高性能渲染十万级数据一文中，提到了可以使用时间分片的方式来对长列表进行渲染，但这种方式更适用于列表项的DOM结构十分简单的情况。本文会介绍使用虚拟列表的方式，来同时加载大量数据。

一、为什么需要使用虚拟列表

　　在实际的工作中，列表项必然不会仅仅只由一个li标签组成，必然是由复杂DOM节点组成的。那么可以想象的是，当列表项数过多并且列表项结构复杂的时候，同时渲染时，会在Recalculate Style和Layout阶段消耗大量的时间。

　　而虚拟列表就是解决这一问题的一种实现。

二、什么是虚拟列表

　　虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。

　　假设有1万条记录需要同时渲染，我们屏幕的可见区域的高度为500px，而列表项的高度为50px，则此时我们在屏幕中最多只能看到10个列表项，那么在首次渲染的时候，我们只需加载10条即可。