虚拟列表

虚拟列表

场景：接口返回巨量的数据，全部渲染会非常耗时间、消耗性能

解决：只需要展示用户所能看到的数据，其他不做渲染

实现：外层容器高度固定，内层容器高度动态计算，虚拟容器用来显示滚动条（每条高度 * 数据量），通过滚动事件计算当前滚动位置，根据位置计算需要渲染的数据，渲染数据到页面

虚拟列表，如果子元素高度不固定，处理方案

1. 动态计算子元素高度： 首先，你需要在渲染子元素之前动态计算每个子元素的高度。

const childElement = document.getElementById("child - element");
const childHeight = childElement.clientHeight;

2. 存储高度信息： 一旦你计算了每个子元素的高度，你可以将这些高度信息存储在一个数组中，其中索引对应于子元素在虚拟列表中的位置。

const childHeights = [100, 150, 120, ...]; // 存储子元素的高度

3. 根据高度信息渲染子元素： 在虚拟列表中，使用已存储的子元素高度信息来计算视口中应该渲染哪些子元素。根据已知的子元素高度和视口的高度来动态计算可见子元素的数量。通过维护一个滚动位置，可以确定哪些子元素应该在视口中渲染，然后只渲染这些子元素。