JavaScript 虚拟滚动：优化长列表渲染性能-js教程-PHP中文网

JavaScript 虚拟滚动：优化长列表渲染性能

夢幻星辰

发布： 2025-10-31 09:15:02

原创

553人浏览过

虚拟滚动通过只渲染可视区域内的元素来提升长列表性能。它计算可视范围，监听滚动偏移，动态更新渲染区间，并用占位元素维持滚动条状态，从而减少DOM数量，实现流畅滚动体验。

javascript 虚拟滚动：优化长列表渲染性能

长列表在网页应用中很常见，比如聊天记录、商品列表或日志展示。当数据量达到几百甚至上千条时，直接渲染所有 DOM 元素会导致页面卡顿、滚动不流畅。JavaScript 虚拟滚动（Virtual Scrolling）是一种高效的优化方案，它只渲染可视区域内的元素，大幅减少 DOM 节点数量，从而提升性能。

什么是虚拟滚动？

虚拟滚动的核心思想是：只渲染当前用户可见区域内的列表项，而非整个数据集。当用户滚动时，动态更新渲染的内容，复用或重新计算位置。这样即使有上万条数据，页面也只需处理几十个 DOM 节点。

例如，一个包含 10000 条数据的列表，每条高度 50px，总高 50 万像素。但视口高度只有 600px，理论上同时可见的最多 12 项。虚拟滚动会创建一个外层容器，设置总高度占位，内部仅渲染这 12 项左右的内容，并随滚动实时调整。

实现虚拟滚动的关键要素

要实现一个基本的虚拟滚动组件，需关注以下几个核心部分：

立即学习“Java免费学习笔记（深入）”；

容器尺寸与可视区域计算：获取外层滚动容器的高度，结合每一项的高度，算出可视区域内应显示多少项。
滚动偏移监听：通过监听 scroll 事件，读取 scrollTop 值，确定当前滚动到了哪一段数据。
渲染区间控制：根据 scrollTop 和项目高度，计算出起始索引和结束索引，只渲染这一范围内的数据。
位置占位：使用一个空白元素（如 div）作为顶部或底部填充，模拟整体列表高度，保持滚动条正常显示。

提示：若列表项高度固定，计算简单；若高度不一，则需预估或缓存每个项目的高度，增加复杂度。

百度虚拟主播

百度智能云平台的一站式、灵活化的虚拟主播直播解决方案

查看详情

简单实现示例

以下是一个简化版的虚拟滚动实现思路：

<pre class="brush:php;toolbar:false;">
// 假设每项高度为 50px
const itemHeight = 50;
const containerHeight = 600; // 容器可视高度
const totalItems = 10000;
<p>const container = document.getElementById('container');
const content = document.getElementById('content');</p><p>// 可显示的项目数 + 额外缓冲项
const visibleCount = Math.ceil(containerHeight / itemHeight);
const buffer = 5; // 上下各多渲染几项，防止快速滚动白屏
const renderCount = visibleCount + buffer * 2;</p><p>container.addEventListener('scroll', () => {
const scrollTop = container.scrollTop;
const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
const endIndex = Math.min(totalItems, startIndex + renderCount);</p><p>// 设置顶部空白高度，维持滚动位置
content.style.paddingTop = startIndex <em> itemHeight + 'px';
content.style.paddingBottom = (totalItems - endIndex) </em> itemHeight + 'px';</p><p>// 渲染当前区间的数据（可替换为 React/Vue 的列表更新）
renderItems(startIndex, endIndex);
});

登录后复制