虚拟滚动列表实现原理 - 虚拟滚动实现原理详解

个生活化类比

想象你在装修新家——客厅还没完全铺完地板，但你不能等全屋装修完才搬进去。于是你先打通入户通道（形成“视口”），只布置几个关键区域（渲染可见 DOM），让家人能先住进来；其余房间则先用围挡或布帘临时隔开（“占位”），后续逐步施工（“后渲染”）。这就是虚拟滚动列表实现原理的精髓：先占位，后渲染。

DOM 复用策略示意（伪代码）

// 渲染前：检查复用池是否有空闲 DOM
const recycledNode = pool.pop() || createNode();
// 若节点复用，则更新内容而非重建
recycledNode.textContent = data[i].content;
recycledNode.dataset.index = startIndex + i;
// 滚动出视口后，回收节点
recycledNode.style.display = 'none';
pool.push(recycledNode);

场景：第 50 条新消息插入，当前窗口显示第 40~59 条

系统需执行三步重排：

1. 识别新消息应插入位置（索引 50）；
2. 将窗口内索引 ≥50 的节点整体后移（腾出第 50 位）；
3. 若窗口容量已满，则移除尾部节点（如第 59 条），将其放入复用池。

结果：窗口内容变为 [40,41,...,49,50,51,...,58]，用户看到的是“第 50 条突然出现”，而非数据错乱。

transform: translateY(${index  itemHeight}px)

图片懒加载优化示例

// 虚拟滚动中图片加载逻辑
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
// 在虚拟列表渲染后绑定 observer
renderedItems.forEach(item => {
  observer.observe(item.querySelector('img'));
});

完整代码示例（含注释）

<div class="virtual-list" style="height: 500px; overflow-y: auto;">
  <div id="list-container" style="position: relative;"></div>
</div>
<script>
const dataList = Array.from({length: 10000}, (_, i) => ({
  id: i,
  content: `第 ${i} 条数据：${'虚拟滚动'.repeat(Math.floor(Math.random()  5 + 1))}`
}));
// 1. 初始化容器与缓存
const container = document.getElementById('list-container');
const wrapper = document.querySelector('.virtual-list');
let heightCache = []; // 存储每条高度
let recycledNodes = []; // 复用池
const WINDOW_SIZE = 30; // 窗口大小
const AVG_HEIGHT = 60; // 平均高度估算
// 2. 创建节点（优先复用）
function createNode(index) {
  if (recycledNodes.length > 0) {
    return recycledNodes.pop();
  }
  const node = document.createElement('div');
  node.style.position = 'absolute';
  node.style.left = '0';
  node.style.right = '0';
  node.style.height = 'auto';
  node.style.padding = '12px 0';
  node.style.borderBottom = '1px solid #eee';
  return node;
}
// 3. 渲染窗口
function renderWindow(startIndex) {
  const items = dataList.slice(startIndex, startIndex + WINDOW_SIZE);
  const fragment = document.createDocumentFragment();
  items.forEach((item, i) => {
    const node = createNode(startIndex + i);
    node.innerHTML = `第 ${startIndex + i} 条：${item.content}`;
    node.dataset.index = startIndex + i;
    fragment.appendChild(node);
  });
  container.innerHTML = '';
  container.appendChild(fragment);
  // 计算并缓存高度（异步测量）
  setTimeout(() => {
    container.querySelectorAll('div').forEach((node, i) => {
      const realIndex = startIndex + i;
      heightCache[realIndex] = node.offsetHeight;
    });
  }, 0);
}
// 4. 滚动处理
let currentStartIndex = 0;
wrapper.addEventListener('scroll', () => {
  const scrollTop = wrapper.scrollTop;
  // 根据scrollTop估算 startIndex
  let estimatedIndex = Math.floor(scrollTop / AVG_HEIGHT);
  // 精确调整：根据缓存高度反推
  let cumulativeHeight = 0;
  for (let i = 0; i < heightCache.length; i++) {
    cumulativeHeight += heightCache[i] || AVG_HEIGHT;
    if (cumulativeHeight > scrollTop) {
      estimatedIndex = i;
      break;
    }
  }
  // 限制边界
  currentStartIndex = Math.max(0, Math.min(estimatedIndex, dataList.length - WINDOW_SIZE));
  // 防抖渲染
  clearTimeout(window.renderTimer);
  window.renderTimer = setTimeout(() => {
    renderWindow(currentStartIndex);
    // 计算总高度并设置容器
    const totalHeight = heightCache.reduce((sum, h) => sum + (h || AVG_HEIGHT), 0);
    container.style.height = `${totalHeight}px`;
  }, 50);
});
// 5. 初始化渲染
renderWindow(0);
</script>

主流列表渲染方案对比表

方案	DOM 节点数	滚动流畅度	支持动态高度	适用场景
传统列表	O(n)	差（卡顿）	是	≤100 条静态数据
分页列表	O(k)	一般（跳转卡顿）	是	文档、搜索结果
虚拟滚动	O(k)	优（丝滑）	需额外处理	聊天、Feed 流、数据看板
Web Worker 渲染	O(n)	极优	是	超大数据量（≥10 万条）

延伸阅读建议

• 《高性能 JavaScript》—— “DOM 编程”章节详解渲染机制
• MDN：《虚拟列表的 10 种实现方式》
• React Virtualized 源码解析（GitHub）
• Chrome DevTools：性能面板分析滚动性能