前端虚拟列表实现：别再渲染10000个DOM节点了

前端虚拟列表实现：别再渲染10000个DOM节点了

毒舌时刻

这代码写得跟网红滤镜似的——仅供参考。

各位前端同行，咱们今天聊聊前端虚拟列表。别告诉我你还在一次性渲染10000个列表项，那感觉就像把10000本书全部摆在桌面上——既占地方又难找。

为什么你需要虚拟列表

最近看到一个项目，一个下拉列表有5000个选项，全部渲染导致页面卡死，我差点当场去世。我就想问：你是在做列表还是在做性能杀手？

反面教材

// 反面教材：一次性渲染所有数据 function BigList({ items }) { return ( <ul style={{ height: '400px', overflow: 'auto' }}> {items.map(item => ( <li key={item.id} style={{ height: '50px' }}> {item.name} </li> ))} </ul> ); } // 使用 <BigList items={Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }))} /> // 浏览器：我太难了 

毒舌点评：这代码，我看了都替浏览器着急。渲染10000个DOM节点，你是想让用户的电脑变成暖炉吗？

前端虚拟列表的正确姿势

1. 基础虚拟列表实现

// 正确姿势：基础虚拟列表 import { useState, useRef, useMemo, useCallback } from 'react'; function VirtualList({ items, itemHeight, containerHeight }) { const [scrollTop, setScrollTop] = useState(0); const containerRef = useRef(null); // 计算可见区域 const visibleCount = Math.ceil(containerHeight / itemHeight); const totalHeight = items.length * itemHeight; // 计算起始和结束索引 const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.min(startIndex + visibleCount + 1, items.length); // 获取可见项 const visibleItems = useMemo(() => { return items.slice(startIndex, endIndex); }, [items, startIndex, endIndex]); // 偏移量 const offsetY = startIndex * itemHeight; const handleScroll = useCallback((e) => { setScrollTop(e.target.scrollTop); }, []); return ( <div ref={containerRef} style={{ height: containerHeight, overflow: 'auto' }} onScroll={handleScroll} > <div style={{ height: totalHeight, position: 'relative' }}> <div style={{ transform: `translateY(${offsetY}px)` }}> {visibleItems.map((item, index) => ( <div key={item.id} style={{ height: itemHeight }} className="virtual-list-item" > {item.name} </div> ))} </div> </div> </div> ); } // 使用 function App() { const items = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })); return ( <VirtualList items={items} itemHeight={50} containerHeight={400} /> ); } 

2. 使用react-window

// 正确姿势：使用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中使用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> 

毒舌点评：早这么写，你的列表早流畅了。别告诉我你还在渲染10000个DOM节点，那你还是趁早去用分页吧。

实战技巧：虚拟列表指南

1. 虚拟列表原理

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

2. 最佳实践

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

最后想说的

虚拟列表不是炫技，是性能优化。别再渲染10000个DOM节点了——虚拟化一下，你的应用会飞起来。

虚拟列表就像图书馆的检索系统，不需要把所有书都摆在桌上，只需要展示你想看的那几本。别做图书搬运工，做图书管理员。