前端虚拟列表实现原理与优化实践

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

<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. 虚拟列表原理

1. 只渲染可见项：只渲染视口内的元素。
2. 计算偏移量：通过 transform 移动内容。
3. 动态高度支持：预估高度或动态计算。

2. 最佳实践

1. 固定高度：优先使用固定高度，性能好。
2. 缓冲区域：上下多渲染几个 item，避免白屏。
3. 滚动优化：使用 requestAnimationFrame。