在前端开发的日常工作中，我们经常会遇到这样一个让人头疼的场景：产品经理跑过来说“我们需要在这个页面展示这十万条数据，而且要保证滑动如丝般顺滑。” 听到这话，你的第一反应可Neng是想直接把电脑屏幕扣过去。毕竟Ru果老老实实地按照传统方式，把这成千上万个节点一股脑儿全部塞进 DOM 树里浏览器恐怕连哭带喘地就要崩溃了。

这时候，虚拟列表 就像是一根救命稻草。它的核心逻辑其实非常巧妙——既然屏幕一次只Nengkan到那么几条数据，为什么要在内存里养着那么多kan不见的“闲人”呢？只渲染用户眼睛盯着的那一小部分，剩下的等用户滑到了再处理，这不就万事大吉了吗？

不过说起来容易Zuo起来难。特别是当列表项的高度不固定时事情就变得有趣且棘手了。今天我们就来掰开揉碎了聊聊，到底该怎么搞定这固定高度和动态高度两种模式的虚拟列表实现。

在深入代码之前，我们先得明白“痛点”到底在哪。当你试图在一个页面上渲染海量数据时直接全量渲染会引发一系列连锁反应：

DOM 节点爆炸： 每一个列表项dou是一个 DOM 节点，节点越多，内存占用就越高，浏览器的 GC压力就越大。

重排重绘噩梦： 哪怕只是微小的滚动，浏览器也可Neng需要计算大量不可见元素的位置，导致 CPU 飙升。

交互卡顿： 主线程被繁重的渲染任务阻塞，用户的点击、输入等操作响应变慢，体验极差。

虚拟列表通过“按需渲染”完美解决了这个问题。它就像一个精明的舞台经理，只把演员安排在聚光灯下而其他的演员则在后台待命。

要实现虚拟列表，我们得先搭建好舞台。这里有几个关键角色：

Container： 这是一个固定高度的容器，设置了 overflow: auto，它就是我们的“窗口”。

Phantom： 这是一个绝对定位的空 div，它的高度等于所有列表项高度的总和。它的作用是撑开容器的滚动条，让用户以为真的有那么多内容。

Visible Items： 真正被渲染出来的 DOM 节点，它们通过绝对定位放置在 Phantom 内部的正确位置上。

┌─────────────────────────────────────┐
│          Container         │
│  ┌─────────────────────────────┐    │
│  │     可见列表项      │    │
│  │                             │    │
│  │        Item                │    │
│  │        Item                │    │
│  │        Item                │    │
│  │        Item                │    │
│  │        Item                │    │
│  └─────────────────────────────┘    │
│                                     │
│  ↑ 缓冲区                    │
│  ↓ 缓冲区                    │
└─────────────────────────────────────┘
│          Phantom           │  ← 总高度 = 所有项高度之和
└─────────────────────────────────────┘

Ru果列表里的每一项高度dou一模一样，比如dou是 50px，那事情就简单多了。这简直就是小学数学题：

位置计算： 第 N 个元素的 top 值就是 N * 50。时间复杂度 O，快得飞起。

我们来kankan代码层面怎么处理这种“理想情况”：

/**
 * 固定高度模式下的位置计算
 * 这种方式极其高效，不需要任何缓存或测量
 */
function calculateFixedPositions {
  return data.map => ({
    top: index * itemHeight,
    height: itemHeight
  }));
}

在这种模式下我们甚至不需要去测量 DOM 元素的实际高度，直接根据索引就Neng算出它该出现在哪里。这也是为什么hen多简单的虚拟列表库性Neng极高的原因。

现实往往hen骨感。我们的列表里可Neng包含不同长度的文本、不同尺寸的图片，甚至有的项是折叠的，有的是展开的。这时候，固定高度的假设就不成立了。

动态高度的难点在于一个死循环：不渲染就不知道高度，不知道高度就不知道位置，不知道位置就没法渲染。

为了打破这个循环，我们引入了一套“预估-测量-缓存”的机制。

在元素还没渲染出来之前，我们只Neng“瞎猜”一个高度。一旦渲染出来我们立马测量它的真实高度，存进缓存，并geng新后续所有元素的位置。

/**
 * 动态高度：需要累积计算
 * 这里体现了“缓存”的重要性，避免重复计算Yi知的项
 */
function calculateDynamicPositions {
  const positions = ;
  let currentTop = 0;
  for  {
    // 优先使用Yi测量的高度，否则使用预估高度
    const height = heightCache.get ?? estimateHeight;
    positions.push({
      top: currentTop,
      height
    });
    currentTop += height;
  }
  return positions;
}

在固定高度模式下我们要找第 100 个可见项，直接用 scrollTop / itemHeight 就Neng算出来。但在动态高度模式下由于每个项高度不一，我们只Neng维护一个位置数组 positions。

Ru果数据量hen大，从头遍历这个数组去找当前滚动位置对应的索引，效率太低了。这时候，二分查找 就派上用场了。它Neng将查找速度提升到 O，这在处理十万级数据时差异巨大。

/**
 * 二分查找：找到第一个顶部位置>= scrollTop 的项索引
 * 时间复杂度：O
 */
function binarySearchFirstVisible {
  let left = 0;
  let right = positions.length - 1;
  let result = 0;
  while  {
    const mid = Math.floor / 2);
    const midBottom = positions.top + positions.height;
    if  {
      left = mid + 1;
    } else {
      result = mid;
      right = mid - 1;
    }
  }
  return result;
}
/**
 * 二分查找：找到第一个底部位置> scrollBottom 的项索引
 */
function binarySearchLastVisible {
  let left = 0;
  let right = positions.length - 1;
  let result = positions.length - 1;
  while  {
    const mid = Math.floor / 2);
    if  {
      left = mid + 1;
    } else {
      result = mid;
      right = mid - 1;
    }
  }
  return result;
}

Ru果你只渲染可视区域内的那几个元素，当用户快速滑动鼠标滚轮时浏览器还没来得及渲染下一帧，用户就会kan到一片惨白的空白。这体验简直糟糕透顶。

解决办法就是缓冲区。我们在可视区域的上方和下方，多渲染几个“kan不见”的元素。这样，当用户滚动时新的元素其实Yi经提前准备好了无缝衔接。

/**
 * 计算缓冲区大小
 * 快速滚动时增大缓冲区，减少白屏
 */
function getBufferSize {
  // 滚动中时增加缓冲区，给浏览器多一点反应时间
  return isScrolling 
     ? containerHeight * bufferRatio * 2 
     : containerHeight * bufferRatio;
}
/**
 * 获取可视区域的范围
 */
function getVisibleRange {
  const scrollTopWithBuffer = Math.max;
  const scrollBottomWithBuffer = scrollTop + containerHeight + bufferSize;
  // 二分查找可视区域
  let start = binarySearchFirstVisible;
  let end = binarySearchLastVisible;
  // 添加 overscan 预渲染项
  start = Math.max;
  end = Math.min;
  return { start, end };
}

理论讲完了是时候上硬菜了。下面是一个基于 React Hooks 的完整实现。为了方便大家理解，我把逻辑拆得hen细，并且加上了详细的注释。这段代码同时支持固定高度和动态高度两种模式。

import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
// ============================================
// 类型定义
// ============================================
interface VirtualListProps {
  data: T;
  renderItem:  => React.ReactNode;
  keyExtractor:  => string | number;
  containerHeight: number;
  itemHeight?: number; // 固定高度模式：传入此项则使用固定高度
  estimateItemHeight?:  => number; // 动态高度预估函数
  bufferRatio?: number;
  overscan?: number;
}
// ============================================
// 二分查找函数：O 定位可视区域
// ============================================
function binarySearchStart(
  positions: { top: number; height: number },
  scrollTop: number
): number {
  let left = 0;
  let right = positions.length - 1;
  let result = 0;
  while  {
    const mid = Math.floor / 2);
    const midBottom = positions.top + positions.height;
    if  {
      left = mid + 1;
    } else {
      result = mid;
      right = mid - 1;
    }
  }
  return result;
}
function binarySearchEnd(
  positions: { top: number; height: number },
  scrollBottom: number
): number {
  let left = 0;
  let right = positions.length - 1;
  let result = positions.length - 1;
  while  {
    const mid = Math.floor / 2);
    if  {
      left = mid + 1;
    } else {
      result = mid;
      right = mid - 1;
    }
  }
  return result;
}
// ============================================
// 核心组件：虚拟列表
// ============================================
function VirtualList({
  data,
  renderItem,
  keyExtractor,
  containerHeight,
  itemHeight,
  estimateItemHeight,
  bufferRatio = 0.5,
  overscan = 3,
}: VirtualListProps) {
  // 判断是否固定高度模式
  const isFixedHeight = itemHeight !== undefined;
  // Refs：使用 ref 存储可变值，避免频繁触发重渲染
  const containerRef = useRef;
  const phantomRef = useRef;
  const itemsRef = useRef);
  const heightCacheRef = useRef);
  const positionsRef = useRef<{ top: number; height: number }>;
  const scrollTopRef = useRef;
  const isScrollingRef = useRef;
  const scrollTimerRef = useRef;
  // 状态
  const  = useState;
  const  = useState;
  // ============================================
  // 核心点1：计算所有项的位置信息
  // ============================================
  const updatePositions = useCallback => {
    const positions: { top: number; height: number } = ;
    let currentTop = 0;
    for  {
      let height: number;
      if  {
        height = itemHeight!;
      } else {
        if ) {
          height = heightCacheRef.current.get!;
        } else if  {
          height = estimateItemHeight;
        } else {
          height = 50; // 默认兜底高度
        }
      }
      positions.push({
        top: currentTop,
        height,
      });
      currentTop += height;
    }
    positionsRef.current = positions;
    // geng新 phantom 高度
    if  {
      phantomRef.current.style.height = `${currentTop}px`;
    }
  }, );
  // ============================================
  // 核心点2：计算缓冲区大小
  // ============================================
  const getBufferSize = useCallback => {
    // 快速滚动时增大缓冲区，减少白屏
    return isScrolling
      ? containerHeight * bufferRatio * 2
      : containerHeight * bufferRatio;
  }, );
  // ============================================
  // 核心点3：获取可视区域的项目
  // ============================================
  const getVisibleRange = useCallback => {
    const positions = positionsRef.current;
    if  {
      const defaultEnd = Math.min;
      return { start: 0, end: Math.max };
    }
    const bufferSize = getBufferSize;
    const scrollTop = scrollTopRef.current;
    const scrollTopWithBuffer = Math.max;
    const scrollBottomWithBuffer = scrollTop + containerHeight + bufferSize;
    // 二分查找可视区域
    let start = binarySearchStart;
    let end = binarySearchEnd;
    // 添加预渲染项
    start = Math.max;
    end = Math.min;
    return { start, end };
  }, );
  // ============================================
  // 核心点4：重新渲染可见区域位置
  // ============================================
  const rerenderVisible = useCallback => {
    const positions = positionsRef.current;
    itemsRef.current.forEach => {
      const position = positions;
      if  {
        el.style.top = `${position.top}px`;
      }
    });
  }, );
  // 初始化和geng新
  useEffect => {
    updatePositions;
    forceUpdate => prev + 1);
  }, );
  // 监听 itemHeight 变化
  const prevItemHeightRef = useRef;
  useEffect => {
    // 检测模式切换
    if  !== ) {
      // 模式切换时重置所有状态
      heightCacheRef.current.clear;
      itemsRef.current.clear;
      scrollTopRef.current = 0;
      if  {
        containerRef.current.scrollTop = 0;
      }
      updatePositions;
      forceUpdate => prev + 1);
    }
    prevItemHeightRef.current = itemHeight;
  }, );
  // ============================================
  // 核心点5：滚动事件处理
  // ============================================
  const handleScroll = useCallback => {
    scrollTopRef.current = e.currentTarget.scrollTop;
    isScrollingRef.current = true;
    setIsScrolling;
    if  {
      clearTimeout;
    }
    // 滚动停止后重置状态
    scrollTimerRef.current = setTimeout => {
      isScrollingRef.current = false;
      setIsScrolling;
    }, 150);
    forceUpdate => prev + 1);
  }, );
  // 清理定时器
  useEffect => {
    return  => {
      if  {
        clearTimeout;
      }
    };
  }, );
  // 数据变化时重置
  const prevDataLengthRef = useRef;
  useEffect => {
    if  {
      heightCacheRef.current.clear;
      itemsRef.current.clear;
      scrollTopRef.current = 0;
      prevDataLengthRef.current = data.length;
      if  {
        containerRef.current.scrollTop = 0;
      }
      updatePositions;
    }
  }, );
  // ============================================
  // 计算可视数据
  // ============================================
  const { start, end } = getVisibleRange;
  const visibleData = useMemo => {
    return data.slice.map => ({
      item,
      index: start + i,
    }));
  }, );
  const totalHeight = useMemo => {
    const positions = positionsRef.current;
    if  return 0;
    const last = positions;
    return last.top + last.height;
  }, );
  // ============================================
  // 动态高度测量：使用 requestAnimationFrame 批量geng新
  // ============================================
  useEffect => {
    if  return;
    const pendingMeasure: { el: HTMLDivElement; index: number } = ;
    itemsRef.current.forEach => {
      if ) {
        pendingMeasure.push;
      }
    });
    if  {
      requestAnimationFrame => {
        let hasUpdate = false;
        pendingMeasure.forEach => {
          if ) {
            const actualHeight = el.getBoundingClientRect.height;
            heightCacheRef.current.set;
            hasUpdate = true;
          }
        });
        if  {
          updatePositions;
          rerenderVisible;
        }
      });
    }
  }, );
  // ============================================
  // 渲染
  // ============================================
  return (
    

      

        {visibleData.map => {
          const position = positionsRef.current;
          return (
            
 {
                if  {
                  itemsRef.current.set;
                } else {
                  itemsRef.current.delete;
                }
              }}
              style={{
                position: 'absolute',
                top: position?.top ?? 0,
                left: 0,
                right: 0,
                height: isFixedHeight ? itemHeight : 'auto',
              }}
           >
              {renderItem}
            
          );
        })}
      
    
  );
}
export default VirtualList;

为了让大家geng直观地理解，我把这两种方案放在一起Zuo个对比。知己知彼，才Neng在开发中Zuo出Zui合适的选择。

虚拟列表是处理大数据列表渲染的经典方案，核心思想就是“只渲染可视区域内的元素”。通过本文的剖析，我们不仅掌握了固定高度下的简单数学计算，geng攻克了动态高度下的测量、缓存与二分查找等难点。

当然市面上的成熟库Yi经把这些细节封装得非常完美了。但是作为一个有追求的前端工程师，了解其背后的原理，不仅Neng帮我们在遇到极端 Bug 时快速定位问题，也Neng让我们对浏览器的渲染机制有geng深刻的理解。

希望这篇文章Neng让你对虚拟列表有一个全新的认识。下次再面对海量数据渲染时别慌，用虚拟列表轻松搞定！Ru果觉得本文对你有帮助，欢迎点赞收藏，有问题欢迎在评论区讨论！