本文已参与「新人创作礼」活动，一起开启掘金创作之路。
有关提高性能，需要大量渲染数据的列表渲染是一个比较常见的要求。
当接口返回大量的数据，渲染这种列表叫作长列表，而处理长列表的两种方式有：1、分片渲染；2、列表渲染。
分片渲染
分片渲染顾名思义就是数据分开渲染，这样解决了一次性渲染所带来的卡顿。
根据EventLoop原理实现的，代码执行放入执行栈中，同步代码先执行，遇到宏任务放入宏任务队列，遇到微任务放到微任务队列，等同步代码执行完毕之后清空微任务队列，然后再将宏任务队列的第一项放入执行栈中，再进行以上的执行过程，这就形成了事件环机制（每循环一次会执行一个宏任务，并清空对应的微任务队列）
先明确，页面渲染是在清空微任务之后：
分片渲染用的时间会比没分片长，好处就是不需要等所有渲染出来，可以直接看到数据，你拖动滚动条，还能看见页面还在加载。
虽然分片渲染可以优化，但是这种方法，页面的dom还是过多了，所以这种方法现在也几乎不会用了，一般会使用虚拟列表方法去优化。
虚拟列表
实现虚拟列表的思路
1.由于虚拟列表只显示视口的数据，所以不会显示出滚动条，那么我们需要造一个滚动条。
2.造出滚动条之后元素就会被挤到下面 我们需要设置一个相对于父元素的定位。
3.由于设置了定位，当父元素滚动的时候，设置了定位的子元素会相对应的移动，那么我们需要在滚动的时候给子元素动态的设置top的值
4.获取到数据之后，需要根据视口来筛选要显示的数据\
具体操作：
- 计算当前可见区域起始数据的
startIndex - 计算当前可见区域结束数据的
endIndex - 计算当前可见区域的数据，并渲染到页面中
- 计算startIndex对应的数据在整个列表中的偏移位置
startOffset，并设置到列表上
