虚拟列表从原理到实现：大数据量前端渲染的终极性能优化方案

你的页面需要渲染 10 万条数据，<div> 列表一挂载，Chrome 直接白屏 3 秒，内存飙到 800MB——这不是假设，而是无数中后台系统、交易记录页、消息列表的真实困境。虚拟列表（Virtual List） 是解决这个问题的标准方案：它只渲染可视区域内的 DOM 节点，无论数据总量是 1 万还是 100 万，页面始终保持丝滑流畅。但网上大多数教程只讲了个皮毛，遇到「动态高度」「滚动锚定」「移动端触底加载」就集体失声。本文将从浏览器渲染原理出发，手写一个生产级虚拟列表，覆盖定高、动态高度、三种滚动锚定策略，并与主流库做性能对比。

📌 记住： 虚拟列表不是银弹。它解决的是「大量同质 DOM 节点导致的渲染性能问题」。如果你的列表只有几百条、每条都是复杂卡片且高度不确定，虚拟列表可能不是最优解——分页或懒加载可能更合适。

🔬 一、虚拟列表的核心原理与渲染瓶颈

1.1 为什么渲染 1 万条 DOM 会卡？

浏览器渲染一个列表的开销由三部分组成：DOM 创建、布局计算（Layout） 和 绘制（Paint）。当列表项超过 1000 个时，这三步的开销会指数级增长：

⚠️ 警告： 上表数据来自 Chrome DevTools Performance 面板实测（MacBook Pro M2, 16GB RAM）。实际数据会因列表项复杂度、CSS 样式数量、浏览器版本而异，但数量级差距是确定的。

核心瓶颈在于：浏览器的 Layout 阶段需要遍历所有 DOM 节点计算位置和尺寸。节点越多，遍历越慢。而且一旦触发强制同步布局（Forced Synchronous Layout），整个主线程会被阻塞，用户交互完全无响应。

1.2 虚拟列表的三层架构

虚拟列表的核心思想是「骗」浏览器——让用户以为看到了完整列表，但实际上只渲染了屏幕可见区域（加上少量缓冲区）的 DOM 节点。架构分为三层：

1. 容器层（Container）：固定高度、overflow: auto 的滚动容器，它的 scrollHeight 等于所有列表项的总高度
2. 占位层（Spacer）：一个不可见的元素，高度等于所有未渲染项的总高度，用来撑起正确的滚动条
3. 渲染层（Viewport）：只渲染当前可见区域 + 缓冲区的列表项，通过 transform: translateY() 定位到正确位置

// 虚拟列表的核心数据结构
class VirtualList {
  constructor(options) {
    this.itemHeights = new Map();       // 已知高度缓存
    this.estimatedHeight = 40;          // 预估行高（未测量项使用）
    this.bufferCount = 5;               // 上下缓冲区条数
    this.containerHeight = 0;           // 容器可视高度
    this.scrollTop = 0;                 // 当前滚动位置
    this.totalCount = 0;                // 数据总数
  }
}

1.3 定高列表 vs 动态高度列表

这是虚拟列表最关键的分叉点：

⚡ 关键结论： 如果你的列表项高度一致（或只有 2-3 种固定高度），用定高方案就够了。只有当高度完全由内容决定时，才需要动态高度方案——它的实现复杂度至少是定高方案的 3 倍。

🚀 二、从零实现：定高虚拟列表

2.1 完整的原生 JavaScript 实现

我们先实现最基础的定高虚拟列表。这个版本只有 ~80 行代码，但包含了所有核心逻辑：

// 定高虚拟列表 - 完整实现
class FixedHeightVirtualList {
  constructor(container, options) {
    this.container = container;
    this.itemHeight = options.itemHeight || 40;
    this.totalCount = options.totalCount || 0;
    this.bufferCount = options.bufferCount || 5;
    this.renderItem = options.renderItem;

    // 设置容器样式
    container.style.overflow = 'auto';
    container.style.position = 'relative';

    // 占位元素：撑起总高度
    this.spacer = document.createElement('div');
    this.spacer.style.height = `${this.totalCount * this.itemHeight}px`;
    container.appendChild(this.spacer);

    // 渲染容器：定位可见项
    this.viewport = document.createElement('div');
    this.viewport.style.position = 'absolute';
    this.viewport.style.width = '100%';
    container.appendChild(this.viewport);

    // 当前渲染的范围
    this.renderedStart = -1;
    this.renderedEnd = -1;

    // 绑定滚动事件（使用 passive 提升性能）
    container.addEventListener('scroll', this.onScroll.bind(this), { passive: true });

    // 首次渲染
    this.onScroll();
  }

  // 计算可见范围
  getVisibleRange() {
    const scrollTop = this.container.scrollTop;
    const containerHeight = this.container.clientHeight;

    const startIndex = Math.floor(scrollTop / this.itemHeight);
    const endIndex = Math.ceil((scrollTop + containerHeight) / this.itemHeight);

    // 加上缓冲区
    const bufferedStart = Math.max(0, startIndex - this.bufferCount);
    const bufferedEnd = Math.min(this.totalCount, endIndex + this.bufferCount);

    return { startIndex, endIndex, bufferedStart, bufferedEnd };
  }

  // 滚动事件处理
  onScroll() {
    const { bufferedStart, bufferedEnd } = this.getVisibleRange();

    // 范围没变，跳过渲染
    if (bufferedStart === this.renderedStart && bufferedEnd === this.renderedEnd) {
      return;
    }

    this.renderedStart = bufferedStart;
    this.renderedEnd = bufferedEnd;

    // 清空渲染容器
    this.viewport.innerHTML = '';

    // 设置渲染容器的偏移
    this.viewport.style.transform = `translateY(${bufferedStart * this.itemHeight}px)`;

    // 渲染可见项
    const fragment = document.createDocumentFragment();
    for (let i = bufferedStart; i < bufferedEnd; i++) {
      const el = this.renderItem(i);
      el.style.height = `${this.itemHeight}px`;
      fragment.appendChild(el);
    }
    this.viewport.appendChild(fragment);
  }

  // 更新数据总数
  setTotalCount(count) {
    this.totalCount = count;
    this.spacer.style.height = `${count * this.itemHeight}px`;
    this.onScroll();
  }
}

使用方式非常简单：

// 初始化定高虚拟列表
const container = document.getElementById('list-container');
const vl = new FixedHeightVirtualList(container, {
  itemHeight: 50,
  totalCount: 100000,
  bufferCount: 5,
  renderItem: (index) => {
    const div = document.createElement('div');
    div.textContent = `第 ${index} 行数据`;
    div.style.display = 'flex';
    div.style.alignItems = 'center';
    div.style.padding = '0 16px';
    div.style.borderBottom = '1px solid #eee';
    return div;
  }
});

// 动态更新数据
vl.setTotalCount(200000);

💡 提示： bufferCount 的默认值 5 表示在可视区域上下各多渲染 5 个列表项。这个值太小会导致快速滚动时出现白屏，太大会浪费内存。5-10 是经验值。

2.2 React 版本：定高虚拟列表

// React 定高虚拟列表 Hook
import { useState, useRef, useCallback, useEffect, useMemo } from 'react';

function useVirtualList({ totalCount, itemHeight = 40, bufferCount = 5 }) {
  const containerRef = useRef(null);
  const [range, setRange] = useState({ start: 0, end: 10 });

  const totalHeight = totalCount * itemHeight;

  const onScroll = useCallback(() => {
    if (!containerRef.current) return;
    const { scrollTop, clientHeight } = containerRef.current;

    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferCount);
    const end = Math.min(
      totalCount,
      Math.ceil((scrollTop + clientHeight) / itemHeight) + bufferCount
    );

    setRange(prev => {
      if (prev.start === start && prev.end === end) return prev;
      return { start, end };
    });
  }, [totalCount, itemHeight, bufferCount]);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    el.addEventListener('scroll', onScroll, { passive: true });
    onScroll(); // 首次触发
    return () => el.removeEventListener('scroll', onScroll);
  }, [onScroll]);

  const virtualItems = useMemo(() => {
    const items = [];
    for (let i = range.start; i < range.end; i++) {
      items.push({
        index: i,
        offsetTop: i * itemHeight,
      });
    }
    return items;
  }, [range.start, range.end, itemHeight]);

  return { containerRef, virtualItems, totalHeight };
}

// 使用示例
function VirtualizedList({ data }) {
  const { containerRef, virtualItems, totalHeight } = useVirtualList({
    totalCount: data.length,
    itemHeight: 50,
  });

  return (
    <div ref={containerRef} style={{ height: '100vh', overflow: 'auto' }}>
      <div style={{ height: totalHeight, position: 'relative' }}>
        {virtualItems.map(({ index, offsetTop }) => (
          <div
            key={index}
            style={{
              position: 'absolute',
              top: offsetTop,
              height: 50,
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              padding: '0 16px',
              borderBottom: '1px solid #eee',
            }}
          >
            {data[index].name}
          </div>
        ))}
      </div>
    </div>
  );
}

💡 三、动态高度虚拟列表：真正的硬核挑战

3.1 为什么动态高度这么难？

定高列表中，第 i 项的 offsetTop 就是 i * itemHeight，O(1) 计算。但动态高度下，每个列表项高度不同，你需要知道「前 i 项的累计高度」才能定位第 i 项的位置。这就是 前缀和（Prefix Sum） 问题。

更棘手的是：你在渲染之前不知道高度。高度只有渲染到 DOM 后才能测量。这意味着你需要一个「猜测 → 测量 → 修正」的循环。

3.2 前缀和 + 二分查找定位

动态高度虚拟列表的核心数据结构是一个前缀和数组，配合二分查找实现 O(log n) 的位置查询：

// 动态高度虚拟列表 - 核心实现
class DynamicVirtualList {
  constructor(container, options) {
    this.container = container;
    this.totalCount = options.totalCount || 0;
    this.estimatedHeight = options.estimatedHeight || 50;
    this.bufferCount = options.bufferCount || 5;
    this.renderItem = options.renderItem;

    // 高度缓存：index -> measured height
    this.heightCache = new Map();
    // 前缀和数组：prefixSum[i] = 前 i 项的累计高度
    this.prefixSum = new Float64Array(this.totalCount + 1);
    this.prefixSum[0] = 0;

    // 初始化前缀和（使用预估高度）
    for (let i = 1; i <= this.totalCount; i++) {
      this.prefixSum[i] = this.prefixSum[i - 1] + this.estimatedHeight;
    }

    // DOM 结构
    container.style.overflow = 'auto';
    container.style.position = 'relative';

    this.spacer = document.createElement('div');
    this.spacer.style.height = `${this.prefixSum[this.totalCount]}px`;
    container.appendChild(this.spacer);

    this.viewport = document.createElement('div');
    this.viewport.style.position = 'absolute';
    this.viewport.style.width = '100%';
    container.appendChild(this.viewport);

    // 渲染状态
    this.renderedItems = new Map(); // index -> DOM element
    this.renderedStart = -1;
    this.renderedEnd = -1;

    container.addEventListener('scroll', this.onScroll.bind(this), { passive: true });
    this.onScroll();
  }

  // 二分查找：找到 scrollTop 对应的起始索引
  findStartIndex(scrollTop) {
    let lo = 0, hi = this.totalCount;
    while (lo < hi) {
      const mid = (lo + hi) >>> 1;
      if (this.prefixSum[mid + 1] <= scrollTop) {
        lo = mid + 1;
      } else {
        hi = mid;
      }
    }
    return lo;
  }

  // 测量并更新实际高度
  measureItems() {
    for (const [index, el] of this.renderedItems) {
      const actualHeight = el.offsetHeight;
      const cachedHeight = this.heightCache.get(index);

      if (cachedHeight !== actualHeight) {
        this.heightCache.set(index, actualHeight);
        // 更新前缀和：只修正差值
        const diff = actualHeight - (cachedHeight || this.estimatedHeight);
        if (diff !== 0) {
          for (let i = index + 1; i <= this.totalCount; i++) {
            this.prefixSum[i] += diff;
          }
        }
      }
    }
    // 更新 spacer 高度
    this.spacer.style.height = `${this.prefixSum[this.totalCount]}px`;
  }

  onScroll() {
    const scrollTop = this.container.scrollTop;
    const containerHeight = this.container.clientHeight;

    const startIndex = this.findStartIndex(scrollTop);
    let endIndex = startIndex;

    // 找到 endIndex：累计高度超过 scrollTop + containerHeight
    const targetBottom = scrollTop + containerHeight;
    while (endIndex < this.totalCount && this.prefixSum[endIndex + 1] < targetBottom) {
      endIndex++;
    }

    const bufferedStart = Math.max(0, startIndex - this.bufferCount);
    const bufferedEnd = Math.min(this.totalCount, endIndex + this.bufferCount + 1);

    if (bufferedStart === this.renderedStart && bufferedEnd === this.renderedEnd) return;

    // 清理不可见的项
    for (const [index, el] of this.renderedItems) {
      if (index < bufferedStart || index >= bufferedEnd) {
        this.renderedItems.delete(index);
      }
    }

    this.renderedStart = bufferedStart;
    this.renderedEnd = bufferedEnd;

    this.viewport.style.transform = `translateY(${this.prefixSum[bufferedStart]}px)`;

    // 渲染新项
    const fragment = document.createDocumentFragment();
    for (let i = bufferedStart; i < bufferedEnd; i++) {
      if (!this.renderedItems.has(i)) {
        const el = this.renderItem(i);
        this.renderedItems.set(i, el);
        fragment.appendChild(el);
      }
    }

    // 先清空再重新组装
    this.viewport.innerHTML = '';
    for (let i = bufferedStart; i < bufferedEnd; i++) {
      const el = this.renderedItems.get(i);
      if (el) this.viewport.appendChild(el);
    }

    // 下一帧测量实际高度
    requestAnimationFrame(() => this.measureItems());
  }
}

⚠️ 警告： 动态高度虚拟列表的 prefixSum 更新是 O(n) 操作。当数据量超过 10 万条时，每次高度修正都需要遍历整个前缀和数组。优化方案是使用 树状数组（Binary Indexed Tree / Fenwick Tree） 将更新复杂度降到 O(log n)，但实现复杂度会显著增加。

3.3 滚动锚定：防止列表「跳动」

动态高度列表最大的 UX 问题是：当用户向上滚动、新列表项渲染后测量出的实际高度比预估高度大，会导致已经看到的内容被「推」下去——用户会感觉列表在跳。

解决方案有三种：

// 滚动位置修正：向上滚动时防止跳动
correctScrollPosition(index, heightDiff) {
  // 如果高度变化的项在当前可见区域之上，需要补偿 scrollTop
  const { startIndex } = this.getVisibleRange();
  if (index < startIndex) {
    this.container.scrollTop += heightDiff;
  }
}

📊 四、性能对比与库选型

4.1 原生实现 vs 主流库性能基准

我们在 10 万条数据、每条包含 5 个 DOM 节点的场景下，对比了不同方案的性能：

💡 提示： 性能数据在 Chrome 125、MacBook Pro M2 环境下测试。react-window 和 react-virtuoso 的差异主要来自动态高度支持——react-virtuoso 内置了高度测量和滚动锚定，代价是更多的计算开销。

4.2 库选型建议

⚡ 关键结论： 除非你有特殊需求（如极端的包大小限制或非常规的滚动行为），否则直接用 @tanstack/react-virtual——它在灵活性、性能和易用性之间取得了最好的平衡。

⚠️ 五、常见坑点与避坑指南

5.1 五个最容易踩的坑

❌ 坑 1：忘记设置容器高度

// ❌ 错误：容器没有固定高度，overflow: auto 不生效
<div className="list" style={{ overflow: 'auto' }}>
  {/* 虚拟列表 */}
</div>

// ✅ 正确：容器必须有明确的高度
<div className="list" style={{ overflow: 'auto', height: '100vh' }}>
  {/* 虚拟列表 */}
</div>

❌ 坑 2：使用 key={index} 导致复用错误

// ❌ 错误：索引作为 key，数据更新时 DOM 不会正确复用
{virtualItems.map(({ index }) => (
  <div key={index}>{data[index].name}</div>
))}

// ✅ 正确：使用数据的唯一 ID 作为 key
{virtualItems.map(({ index }) => (
  <div key={data[index].id}>{data[index].name}</div>
))}

❌ 坑 3：滚动事件未使用 passive 选项

// ❌ 错误：默认不是 passive，可能阻塞滚动
container.addEventListener('scroll', onScroll);

// ✅ 正确：添加 passive: true，告诉浏览器不会调用 preventDefault
container.addEventListener('scroll', onScroll, { passive: true });

❌ 坑 4：动态高度列表使用 position: absolute 定位

// ❌ 错误：绝对定位需要提前知道每个元素的高度
<div style={{ position: 'absolute', top: index * estimatedHeight }}>
  {content}
</div>

// ✅ 正确：使用 transform 定位（不会触发 Layout）
<div style={{ transform: `translateY(${offsetTop}px)` }}>
  {content}
</div>

📌 记住： transform 只触发 Composite（合成），不触发 Layout 和 Paint，性能远优于 top/left。在虚拟列表中，每次滚动都会重新定位列表项，使用 transform 可以将定位开销降低 60% 以上。

❌ 坑 5：在滚动回调中做重量级操作

// ❌ 错误：滚动回调中调用 setState 导致频繁重渲染
const onScroll = () => {
  const range = calculateRange();
  setState({ ...state, range, timestamp: Date.now() }); // 多余的状态更新
};

// ✅ 正确：只在范围真正变化时更新状态
const onScroll = () => {
  const range = calculateRange();
  setRange(prev => {
    if (prev.start === range.start && prev.end === range.end) return prev;
    return range;
  });
};

5.2 移动端特殊注意事项

移动端虚拟列表有三个额外挑战：

1. 惯性滚动（Momentum Scroll）：iOS Safari 的惯性滚动会持续触发 scroll 事件长达 1-2 秒，需要确保渲染足够快
2. 触摸精度：手指触摸不如鼠标精确，缓冲区应该更大（建议 bufferCount = 10）
3. 地址栏收缩：移动端浏览器地址栏会随滚动收缩/展开，导致可视区域高度变化，需要监听 resize 事件

// 监听可视区域变化（移动端地址栏收缩）
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const newHeight = entry.contentRect.height;
    if (newHeight !== containerHeight) {
      containerHeight = newHeight;
      onScroll(); // 重新计算可见范围
    }
  }
});
resizeObserver.observe(container);

🎯 六、进阶：虚拟列表 + 无限滚动

在实际项目中，虚拟列表经常与无限滚动（Infinite Scroll）结合使用——数据不是一次性加载的，而是滚动到底部时动态加载下一页：

// 虚拟列表 + 无限滚动整合
function useInfiniteVirtualList({ itemHeight = 50, pageSize = 50 }) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const loadMoreRef = useRef(null);

  // 使用 IntersectionObserver 检测触底
  useEffect(() => {
    if (!loadMoreRef.current) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !loading && hasMore) {
          loadMore();
        }
      },
      { rootMargin: '200px' } // 提前 200px 触发
    );

    observer.observe(loadMoreRef.current);
    return () => observer.disconnect();
  }, [loading, hasMore]);

  const loadMore = useCallback(async () => {
    setLoading(true);
    const newItems = await fetchItems(data.length, pageSize);
    setData(prev => [...prev, ...newItems]);
    setHasMore(newItems.length === pageSize);
    setLoading(false);
  }, [data.length]);

  const { containerRef, virtualItems, totalHeight } = useVirtualList({
    totalCount: data.length + (hasMore ? 1 : 0), // +1 for loading indicator
    itemHeight,
  });

  return { containerRef, virtualItems, totalHeight, data, loading, loadMoreRef };
}

💡 提示： rootMargin: '200px' 意味着 IntersectionObserver 会在距离底部还有 200px 时就触发加载，这样用户滚动到底部时数据已经准备好了，体验更流畅。

✅ 总结与最佳实践

虚拟列表是前端性能优化的核心武器之一，但并非所有场景都需要它。以下是决策树：

• ✅ 使用虚拟列表：数据量 > 1000 条、列表项高度相对一致、需要流畅滚动体验
• ❌ 不需要虚拟列表：数据量 < 500 条、列表项高度差异极大且无法预估、列表项包含大量交互元素
• ⚠️ 谨慎使用：需要支持 Ctrl+F 搜索（虚拟列表会跳过未渲染的项）、需要打印完整列表

推荐工具和库：

虚拟列表看似简单，实则涉及 DOM 性能、滚动机制、内存管理、帧率控制等多个底层知识点。掌握它，你对浏览器渲染原理的理解会提升一个台阶。