前端虚拟列表深度拆解

偏移当前渲染区域

offsetY = startIndex * itemHeight

.list { transform: translateY(offsetY); }

**视觉效果：**DOM 只有十几条、滚动条像真的有十万条

真实项目 React 中使用 demo 整体代码（可直接使用）

import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react'

interface VirtualListProps<T> {
  data: T[]
  height: number // 容器高度
  itemHeight: number // 每一项高度（固定）
  renderItem: (item: T, index: number) => React.ReactNode
  buffer?: number // 缓冲区
}

export function VirtualList<T>({ data, height, itemHeight, renderItem, buffer = 5, }: VirtualListProps<T>) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [scrollTop, setScrollTop] = useState(0)

  /** 可视区能显示的条数 */
  const visibleCount = Math.ceil(height / itemHeight)

  /** 开始索引 */
  const startIndex = Math.max(
    Math.floor(scrollTop / itemHeight) - buffer,
    0
  )

  /** 结束索引 */
  const endIndex = Math.min(
    startIndex + visibleCount + buffer * 2,
    data.length
  )

  /** 当前渲染的数据 */
  const visibleData = useMemo(
    () => data.slice(startIndex, endIndex),
    [data, startIndex, endIndex]
  )

  /** 偏移量 */
  const offsetY = startIndex * itemHeight

  /** 总高度（关键：撑开滚动条） */
  const totalHeight = data.length * itemHeight

  /** 滚动事件 */
  const onScroll = useCallback(() => {
    if (!containerRef.current) return
    setScrollTop(containerRef.current.scrollTop)
  }, [])

  return (
    <div ref={containerRef} style={{ height, overflowY: 'auto', position: 'relative', border: '1px solid #ddd', }} onScroll={onScroll}>
      {/* 撑开高度 */}
      <div style={{ height: totalHeight }} />
      {/* 实际渲染内容 */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${offsetY}px)`, }}>
        {visibleData.map((item, index) => (
          <div key={startIndex + index} style={{ height: itemHeight, boxSizing: 'border-box', borderBottom: '1px solid #eee', }}>
            {renderItem(item, startIndex + index)}
          </div>
        ))}
      </div>
    </>
  )
}

如何使用这个 VirtualList

const data = Array.from({ length: 100000 }, (_, i) => `Row ${i}`)

export default function App() {
  return (
    <VirtualList data={data} height={500} itemHeight={50} renderItem={(item) => <div>{item}</div>} />
  )
}

针对这个 demo，我总结出几个关键点

1. 下面这行代码，不显示任何内容，只是为了撑开滚动条

<div style={{ height: totalHeight }} />

2. 为什么 content 要 absolute + translateY？因为 transform 不会出发布局重排，性能比设置 top 好

transform: translateY(offsetY)

3. buffer 的意义，是防止滚动过快出现白屏，提前渲染上下几条

buffer = 5

**4. 为什么 key 用 startIndex + index？**因为：同一条数据在不同 scrollTop 下会复用 DOM，key 必须全局唯一

可以优化的地方：可以对 scroll 进行一个节流处理

用 ref 记录 RAF 状态

const rafIdRef = useRef<number | null>(null)

改变 onScroll 函数

const onScroll = useCallback(() => {
  if (!containerRef.current) return
  // 如果当前帧已经有任务了，直接 return
  if (rafIdRef.current !== null) return
  rafIdRef.current = requestAnimationFrame(() => {
    setScrollTop(containerRef.current!.scrollTop)
    rafIdRef.current = null
  })
}, [])