虚拟列表核心是只渲染可视区域dom，通过动态复用+transform位置模拟实现；需固定容器高度、监听scroll、用getboundingclientrect提升容错性，避免scrolltop异步问题。
虚拟列表核心原理：只渲染可视区域的 DOM
浏览器卡顿、内存暴涨，往往不是数据量大，而是把几万条 <li> 全部塞进 DOM。虚拟列表不渲染全部项，只计算当前滚动位置对应的那几十个可见项，用 transform: translateY() 模拟整体滚动偏移。关键不是“懒加载”，而是“动态复用 + 位置模拟”。
- 必须知道每项高度（固定高最简单；可变高需预估或缓存）
- 必须监听
scroll或使用IntersectionObserver触发重算 - 容器需设固定高度并启用
overflow-y: auto - 所有子项必须用绝对定位或 transform 偏移，不能靠文档流堆叠
用 requestIdleCallback + getBoundingClientRect 实现轻量版
不依赖框架、不引入复杂状态管理时，这个组合足够应对中等规模（10w+ 条、固定行高）场景。重点是避免在滚动中同步计算，把定位逻辑交给空闲时段。
let startIndex = 0;
let endIndex = 0;
<p>function updateVisibleRange() {
const container = document.getElementById('list-container');
const rect = container.getBoundingClientRect();
const scrollTop = container.scrollTop;
const visibleHeight = rect.height;</p><p>// 假设每项高度为 48px
const itemHeight = 48;
startIndex = Math.max(0, Math.floor(scrollTop / itemHeight));
endIndex = Math.min(data.length, startIndex + Math.ceil(visibleHeight / itemHeight) + 2);</p><p>renderVisibleItems();
}</p><p>function renderVisibleItems() {
const fragment = document.createDocumentFragment();
for (let i = startIndex; i < endIndex; i++) {
const el = document.createElement('div');
el.style.position = 'absolute';
el.style.top = <code>${i * 48}px</code>;
el.style.width = '100%';
el.textContent = data[i];
fragment.appendChild(el);
}
listContainer.innerHTML = '';
listContainer.appendChild(fragment);
}</p><p>listContainer.addEventListener('scroll', () => {
requestIdleCallback(updateVisibleRange);
});为什么不用 scrollTop 直接算，而要用 getBoundingClientRect？
因为 scrollTop 在 iOS Safari 和部分安卓 WebView 中存在异步更新、抖动或延迟问题，尤其配合防抖时容易错帧。用 getBoundingClientRect 获取容器视口位置更稳定，再结合 container.scrollTop 计算逻辑起始索引，容错性更强。
-
scrollTop是滚动容器自身的属性，但可能被 CSS transform、position: sticky 等干扰 - 滚动事件触发频率高，但
getBoundingClientRect调用成本低，比反复读取scrollTop更可靠 - 若容器有 padding/border，
getBoundingClientRect自动包含，无需手动修正
React/Vue 场景下容易踩的三个坑
框架自带 diff 和 key 机制，反而容易掩盖虚拟列表的关键约束——比如忘记清空未复用节点、误用 v-for 的索引作为 key、或在 style.top 中写死 px 却没加单位。
立即学习“Java免费学习笔记（深入）”；
- React 中不要用
index当key：应改用数据唯一 ID，否则滚动时组件实例错乱 - Vue 的
v-for必须配合:key和style="transform: translateY(...)"，不能依赖 margin-top 模拟位移 - 所有虚拟项必须挂载到同一个父容器内，不能让框架自动插入到不同 Fragment 或 Portal 中，否则脱离定位上下文
- 首次渲染前务必预设容器高度，否则
getBoundingClientRect().height可能为 0，导致endIndex算成 NaN
滚动位置映射和 DOM 复用逻辑看似简单，但一旦数据结构嵌套、行高不一、或接入表头冻结/多列布局，边界条件会指数级增加。真正难的不是“怎么让它动起来”，而是“怎么保证它在各种缩放、字体加载、动态主题切换下都不错位”。
