Array.prototype.splice() 是虚拟滚动中高效更新窗口数组的核心方法，用于精准替换当前可视区域数据子集，避免全量重建、减少GC压力并保持引用稳定，配合滚动计算实现轻量级虚拟滚动。
Array.prototype.splice() 本身不直接实现虚拟滚动，但它可以高效地更新用于渲染的“窗口数组”（即当前可视区域对应的数据子集），配合滚动事件和位置计算，构成轻量级虚拟滚动的核心数据管理逻辑。
理解虚拟滚动中 splice 的定位
虚拟滚动的关键不是渲染全部数据，而是只维护和更新“当前可视范围内”的那一小段数据。splice 在这里的作用是：精准替换窗口数组的内容，避免全量重建或频繁 push/pop，减少 GC 压力和引用丢失风险。
它不处理 DOM 操作、滚动监听或位置计算——那些由外部逻辑完成；splice 只负责把正确的一批 item 放进 windowItems 数组。
用 splice 更新窗口数组的典型步骤
假设你已知：总数据 list、容器高度 containerHeight、单条高度 itemHeight、当前滚动偏移 scrollTop：
- 计算可视区域起始索引：
const startIndex = Math.floor(scrollTop / itemHeight); - 计算可视区域需显示的条数（含缓冲区）：
const visibleCount = Math.ceil(containerHeight / itemHeight) + 4;（+4 是上下各留 2 条缓冲） - 确定新窗口范围：
const endIndex = Math.min(startIndex + visibleCount, list.length); - 用 splice 替换整个 windowItems 数组：
windowItems.splice(0, windowItems.length, ...list.slice(startIndex, endIndex));
这行 splice 相当于“清空旧内容 + 插入新切片”，语义清晰、性能可控，且保持 windowItems 引用不变（对 React 等依赖引用稳定的场景友好）。
注意事项与常见优化点
直接用 splice 虽简单，但要注意几个实际细节：
- 避免在 scroll 事件中高频调用：应节流（throttle）或使用 requestIdleCallback，防止 splice 频繁触发重排/重绘
-
splice 不会自动响应式更新（如 Vue 2）：Vue 2 中需用
Vue.set或替换整个数组；Vue 3 / React 中只要 windowItems 是响应式引用或 state，splice 后触发 re-render 即可 -
保留缓冲项时慎用 splice(index, 1)：若只想局部更新（如某一项变化），可用
splice(index, 1, newItem)；但整窗刷新仍推荐全量替换更可靠 - 结合 key 稳定性：windowItems 中每个 item 最好带唯一 key，确保列表框架（如 React）能正确复用 DOM 节点
一个极简示例（无框架）
仅展示数据层逻辑：
const list = Array.from({ length: 10000 }, (_, i) => ({ id: i, text: `Item ${i}` }));
const windowItems = [];
const itemHeight = 50;
const container = document.getElementById('scroll-container');
function updateWindow() {
const scrollTop = container.scrollTop;
const startIndex = Math.floor(scrollTop / itemHeight);
const visibleCount = Math.ceil(container.clientHeight / itemHeight) + 6;
const endIndex = Math.min(startIndex + visibleCount, list.length);
// 用 splice 原地更新 windowItems
windowItems.splice(0, windowItems.length, ...list.slice(startIndex, endIndex));
// 此处触发重新渲染（例如 innerHTML 或 patch DOM）
renderList();
}
container.addEventListener('scroll', updateWindow);
