虚拟列表

虚拟列表是一种优化长列表渲染性能的技术，其原理是：只渲染可视区域内的列表项，未显示的部分不渲染，从而大幅减少 DOM 节点数量，提高性能。

原理简述：

• 计算可视区域：根据容器的高度（sliceSize × itemsSize）和每个列表项的高度（itemsSize），确定一次最多能显示多少个列表项。
• 监听滚动事件：当用户滚动时，记录当前滚动的距离（scrollTop）。
• 确定渲染范围：根据滚动距离，计算出当前应该显示的起始索引（startIndex）和结束索引（endIndex）。
• 只渲染可见项：只渲染 startIndex 到 endIndex 范围内的列表项（visibleItems）。
• 占位和偏移：通过设置一个总高度的占位元素（totalHeight），并用 transform: translateY(offsetY) 把可见项“推”到正确的位置，保证滚动条和视觉效果正常。