每天一个前端小知识 Day 33 - 虚拟列表与长列表性能优化实践（Virtual Scroll）

最新推荐文章于 2026-05-11 14:26:20 发布

原创

最新推荐文章于 2026-05-11 14:26:20 发布 · 1.3k 阅读

标签

#前端 #性能优化

收录于

虚拟列表与长列表性能优化实践（Virtual Scroll）

🎯 一、背景：为何需要虚拟列表？

在实际业务中，我们经常需要渲染大量数据项，比如：

聊天记录滚动展示
电商商品长列表
数据中心表格（DataGrid）

如果直接将上千条 DOM 节点一次性渲染，会引起：

问题	说明
卡顿/掉帧	浏览器 DOM 渲染耗时过大，UI thread 被堵塞
内存暴涨	节点数量越多，内存占用越高，GC 压力大
页面响应慢	任何交互都有延迟，影响用户体验

🧠 二、什么是虚拟滚动（Virtual Scroll）？

虚拟列表是一种“按需渲染”的技术：

只渲染当前可视区域内的少量 DOM 节点，其余的用空白占位撑起滚动高度，从而模拟完整列表滚动。

通过“视口裁剪 + 滚动同步”，将 10000 项渲染的压力降到几十项以内。

🧩 三、虚拟滚动原理简述

📦 示例：

假设每一项高度为 50px
列表有 10000 项，总高度为 500,000px
实际可视区域只能显示 20 项

👉 只渲染这 20 项 DOM 元素
👉 设置容器滚动高度为总高度
👉 根据滚动位置动态更新“可视区域数据 + offset”

📈 可视区域公式计算：

const visibleCount = Math.ceil(containerHeight / itemHeight);
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = startIndex + visibleCount;