场景 :现在页面有一个列表,后端一次返回一万个数据给你
一.直接渲染
第一种就是直接在一个页面中渲染出来, 他大约需要十几秒,足够你关电脑了,因为你的电脑会卡死.显然这种方法是不可取的
二.分页渲染
使用分页是现在非常常见的方法,如果需要分页，需要使用from和size参数。
- from参数定义了需要跳过的hits数，默认为0；
- size参数定义了需要返回的hits数目的最大值。
- 每页数量
limit分成总共Math.ceil(total / limit)页，然后利用setTimeout，每次渲染1页数据，这样的话，渲染出首页数据的时间大大缩减了
三.文档碎片 + requestAnimationFrame
文档碎片可以先把1页的div标签先放进文档碎片中，然后一次性appendChild到container中，这样减少了appendChild的次数，极大提高了性能- 页面只会渲染
文档碎片包裹着的元素，而不会渲染文档碎片
四 .懒加载
在列表尾部放一个空节点blank，然后先渲染第1页数据，向上滚动，等到blank出现在视图中，就说明到底了，这时候再加载第二页，往后以此类推。
至于怎么判断blank出现在视图上，可以使用getBoundingClientRect方法获取top属性 IntersectionObserver 性能更好
五.虚拟列表
什么是虚拟列表
虚拟列表就是只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。
实现思路
（1）写一个代表可视区域的div，固定其高度，通过overflow使其允许纵向 Y 轴滚动。
（2）第二步，计算区域中可以显示的数据条数。这个可以用可视区域的高度除以单条数据高度得到。
（3）监听滚动，当滚动条变化时，计算出被卷起的数据的高度。
（4）计算区域内数据的起始索引，也就是区域内的第一条数据：这个用卷起的高度除以单条数据高度可以拿到。
（5）计算区域内数据的结束索引。通过起始索引+可显示的数据的条数可以拿到。
（6）取起始索引和结束索引中间的数据，渲染到可视区域。
（7）计算起始索引对应的数据在整个列表中的偏移位置并设置到列表上。
整个步骤下来，最终的效果是：不论怎么滚动，我们改变的只是滚动条的高度和可视区的元素内容。每次只会渲染一个固定的条数，不会增加多余元素
