虚拟列表通过仅渲染视口内元素、用占位撑高滚动容器、高效防抖滚动计算及添加缓冲区与骨架屏，解决大数据量下的渲染卡顿问题。
虚拟列表解决大数据渲染卡顿，核心就一条：不渲染看不见的项。
只保留在视口里的DOM节点
传统列表一加载就把全部数据转成DOM，2000条数据就生成2000个
，浏览器要反复计算布局、绘制、合成，主线程直接卡死。虚拟列表反其道而行——滚动容器里永远只存在当前能看到的10~20个节点，哪怕总数据有10万条，DOM树也始终轻量。滚动时只是更新这十几个节点的内容和位置，不是增删大量元素。
用占位撑高滚动条，保持自然滚动体验
用户需要能拖动滚动条快速定位，这就不能真把下面几万行DOM删掉。虚拟列表的做法是：用一个空
设置高度 = 单项高度 × 总条数，撑满整个滚动容器；再把真实内容区域用position: absolute或transform: translateY()精确定位到可视区域对应的位置。滚动条比例、拖拽行为、键盘导航都和原生一致，用户完全无感。
滚动计算必须高效且防抖
滚动事件每秒触发几十次，如果每次都在主线程算起始索引、切数据、重渲染，照样卡。正确做法是：
- 用requestAnimationFrame包裹计算逻辑，确保只在下一帧执行
- 对scrollTop做节流（比如30ms内最多处理一次），避免高频抖动干扰
- 固定高度场景下，起始索引 = Math.floor(scrollTop / itemHeight)，O(1)就能拿到，不用遍历
- 动态高度需预存高度数组，用二分查找定位，控制在O(log n)
别漏掉缓冲区和白屏防护
纯按视口边界渲染容易在快速滚动时闪白。实际实现要加缓冲区：比如视口高600px、每项50px，本该渲染12项，但取前后各3项缓冲，共渲染18项。这样滚动稍快也能覆盖过渡帧。同时初始加载可先渲染骨架占位符，等数据到位再替换，避免首屏或滚动中空白。
