如何去实现高性能列表渲染？

对于一次性向页面中插入超对数据并且不能分页的情况如何处理可以解决页面卡顿问题。

首先需要明确：对于大量数据渲染的时候，JS运算并不是性能的瓶颈，性能的瓶颈主要在于渲染阶段

处理方式有两种：

时间分片

使用window.requestAnimationFrame() 。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

使用requestAnimationFrame来进行分批渲染，每次在在浏览器下一次重绘之前向父节点插入指定数量的列表项

使用documentFragment插入元素：当append元素到document中时，被append进去的元素的样式表的计算是同步发生的，此时调用 getComputedStyle 可以得到样式的计算值。

而append元素到documentFragment 中时，是不会计算元素的样式表，所以documentFragment 性能更优。当然现在浏览器的优化已经做的很好了，

当append元素到document中后，没有访问 getComputedStyle 之类的方法时，现代浏览器也可以把样式表的计算推迟到脚本执行之后。

虚拟列表

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

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

虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除。

计算当前可视区域起始数据索引(startIndex)。

计算当前可视区域结束数据索引(endIndex)。

计算当前可视区域的数据，并渲染到页面中。

计算startIndex对应的数据在整个列表中的偏移位置startOffset并设置到列表上。