前端虚拟列表实现：优化万级 DOM 渲染性能

2. 使用 react-window

利用成熟的库简化实现。

import { FixedSizeList as List } from 'react-window';

function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style} className="list-item">
      {items[index].name}
    </div>
  );

  return (
    <List height={400} itemCount={items.length} itemSize={50}>
      {Row}
    </List>
  );
}

function App() {
  const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }));
  return <VirtualList items={items} />;
}

3. 使用 vue-virtual-scroller

Vue3 环境下的推荐方案。

<template>
  <RecycleScroller :items="items" :item-size="50" key-field="id" v-slot="{ item }">
    <div>{{ item.name }}</div>
  </RecycleScroller>
</template>

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }));
</script>

<style>
.scroller { height: 400px; }
.item { height: 50px; display: flex; align-items: center; padding: 0 20px; }
</style>

核心原理与最佳实践

1. 虚拟列表原理

• 只渲染可见项：仅渲染视口内的元素，减少 DOM 数量。
• 计算偏移量：通过 CSS transform 移动内容位置。
• 动态高度支持：预估高度或动态计算以适应不同内容。

2. 最佳实践

• 固定高度：优先使用固定高度以获得最佳性能。
• 缓冲区域：上下多渲染几个 item，避免滚动时的白屏闪烁。
• 滚动优化：结合 requestAnimationFrame 优化滚动事件处理。

总结

虚拟列表是处理大数据量列表的关键性能优化手段。它通过虚拟化技术，将大量数据映射为少量 DOM 节点，显著提升渲染效率。在实际开发中，应根据项目需求选择合适的实现方式（原生、react-window 或 vue-virtual-scroller），并遵循固定高度、缓冲区域等最佳实践，确保应用流畅运行。