前端虚拟列表实现：别再渲染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. 虚拟列表原理
- 只渲染可见项：只渲染视口内的元素
- 计算偏移量：通过transform移动内容
- 动态高度支持：预估高度或动态计算
2. 最佳实践
- 固定高度：优先使用固定高度，性能好
- 缓冲区域：上下多渲染几个item，避免白屏
- 滚动优化：使用requestAnimationFrame
最后想说的
虚拟列表不是炫技，是性能优化。别再渲染10000个DOM节点了——虚拟化一下，你的应用会飞起来。
虚拟列表就像图书馆的检索系统，不需要把所有书都摆在桌上，只需要展示你想看的那几本。别做图书搬运工，做图书管理员。
