虚拟列表核心是只渲染可视区域DOM，通过动态复用+transform位置模拟实现；需固定容器高度、监听scroll、用getBoundingClientRect提升容错性，避免scrollTop异步问题。
虚拟列表核心原理：只渲染可视区域的 DOM
浏览器卡顿、内存暴涨，往往不是数据量大，而是把几万条 全部塞进 DOM。虚拟列表不渲染全部项，只计算当前滚动位置对应的那几十个可见项，用 transform: translateY() 模拟整体滚动偏移。关键不是“懒加载”，而是“动态复用 + 位置模拟”。
- 必须知道每项高度（固定高最简单；可变高需预估或缓存）
- 必须监听
scroll或使用IntersectionObserver触发重算 - 容器需设固定高度并启用
overflow-y: auto - 所有子项必须用绝对定位或 transform 偏移，不能靠文档流堆叠
用 requestIdleCallback + getBoundingClientRect 实现轻量版
不依赖框架、不引入复杂状态管理时，这个组合足够应对中等规模（10w+ 条、固定行高）场景。重点是避免在滚动中同步计算，把定位逻辑交给空闲时段。
let startIndex = 0; let endIndex = 0;func
tion updateVisibleRange() { const container = document.getElementById('list-container'); const rect = container.getBoundingClientRect(); const scrollTop = container.scrollTop; const visibleHeight = rect.height;
// 假设每项高度为 48px const itemHeight = 48; startIndex = Math.max(0, Math.floor(scrollTop / itemHeight)); endIndex = Math.min(data.length, startIndex + Math.ceil(visibleHeight / itemHeight) + 2);
renderVisibleItems(); }
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 =
${i * 48}px; el.style.width = '100%'; el.textContent = data[i]; fragment.appendChild(el); } listContainer.innerHTML = ''; listContainer.appendChild(fragment); }listContainer.addEventListener('scroll', () => { requestIdleCallback(updateVisibleRange); });
tion updateVisibleRange() {
const container = document.getElementById('list-container');
const rect = container.getBoundingClientRect();
const scrollTop = container.scrollTop;
const visibleHeight = rect.height;为什么不用 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 却没加单位。
- React 中不要用
index当key：应改用数据唯一 ID，否则滚动时组件实例错乱 - Vue 的
v-for必须配合:key和style="transform: translateY(...)"，不能依赖 margin-top 模拟位移 - 所有虚拟项必须挂载到同一个父容器内，不能让框架自动插入到不同 Fragment 或 Portal 中，否则脱离定位上下文
- 首次渲染前务必预设容器高度，否则
getBoundingClientRect().height可能为 0，导致endIndex算成 NaN
滚动位置映射和 DOM 复用逻辑看似简单，但一旦数据结构嵌套、行高不一、或接入表头冻结/多列布局，边界条件会指数级增加。真正难的不是“怎么让它动起来”，而是“怎么保证它在各种缩放、字体加载、动态主题切换下都不错位”。
