虚拟滚动

什么是虚拟滚动？

虚拟滚动（Virtual Scrolling）是一种用于优化长列表或大型表格渲染性能的技术。当需要展示成千上万条数据时，如果一次性将所有数据对应的 DOM 元素全部渲染到页面上，会导致页面加载缓慢、滚动卡顿，甚至浏览器崩溃。

虚拟滚动的核心思想是：只渲染用户当前视口（Viewport）内可见的列表项，以及在视口前后少量用于缓冲的列表项。 当用户滚动列表时，动态地更新和替换视口内的 DOM 元素，从而在任何时候都只维持少量的 DOM 节点，极大地提升了性能和用户体验。

为什么需要虚拟滚动？

想象一个场景：需要展示一个包含 10,000 条记录的列表。

传统渲染方式：
- 一次性创建 10,000 个 <div> 或 <li> 元素。
- 浏览器需要处理这 10,000 个 DOM 节点，进行布局计算（Layout）、绘制（Paint）和合成（Composite）。
- 这会消耗大量的内存和 CPU 资源，导致首次渲染时间极长，并且后续的滚动操作也会因为大量的 DOM 元素而变得卡顿。
虚拟滚动方式：
- 假设视口高度为 500px，每个列表项高度为 50px，那么视口内最多只能看到 10 个列表项。
- 虚拟滚动技术只需要创建并渲染大约 10-20 个（包括缓冲区）DOM 元素。
- 当用户滚动时，我们通过 JavaScript 计算哪些列表项应该进入视口，然后复用或替换已有的 DOM 元素来展示新的数据。
- 这样，DOM 节点的数量始终保持在一个很小的范围内，性能问题迎刃而解。

虚拟滚动的实现原理

实现虚拟滚动的关键在于“欺骗”浏览器和用户。我们通过以下几个步骤来模拟一个完整的长列表：

容器和滚动条：
- 创建一个固定高度的“视口”容器 (viewport)，并设置 overflow: auto 使其可以滚动。
- 在视口容器内部，创建一个“滚动占位”元素 (scroll-placeholder)，它的高度等于所有列表项的总高度。这个元素是不可见的，其唯一作用就是撑开容器，生成一个看起来正确的滚动条。
内容渲染区域：
- 在视口容器内部，创建一个“内容渲染”容器 (render-container)，用于实际承载和渲染当前可见的列表项。
- 这个容器使用绝对定位（position: absolute），并通过 transform: translateY() 属性来根据用户的滚动位置动态调整其垂直位置。
滚动事件监听：
- 监听视口容器的 scroll 事件。
- 当用户滚动时，根据当前的 scrollTop 值，计算出应该在视口中显示的列表项的起始索引 (startIndex) 和结束索引 (endIndex)。
动态渲染和定位：
- 从完整的数据源中，截取从 startIndex 到 endIndex 的数据片段。
- 将这个数据片段渲染成 DOM 元素，并更新到“内容渲染”容器中。
- 同时，更新“内容渲染”容器的 transform: translateY() 值，使其在垂直方向上平移到正确的位置，确保用户看到的是他们期望看到的数据。平移的距离通常是 startIndex * itemHeight。

实际案例：固定高度列表的虚拟滚动

下面是一个使用原生 JavaScript 实现的简单虚拟滚动示例。

HTML 结构

html

<div id="virtual-list-viewport">
  <div id="scroll-placeholder"></div>
  <div id="render-container"></div>
</div>

CSS 样式

css

#virtual-list-viewport {
  height: 500px;
  overflow-y: auto;
  border: 1px solid #ccc;
  position: relative; /* 视口容器需要相对定位 */
}

#scroll-placeholder {
  width: 100%;
  opacity: 0; /* 占位元素不可见 */
}

#render-container {
  position: absolute; /* 渲染容器绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
}

.list-item {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

JavaScript 实现

javascript

// 1. 初始化参数和数据
const viewport = document.getElementById('virtual-list-viewport');
const placeholder = document.getElementById('scroll-placeholder');
const container = document.getElementById('render-container');

const totalItems = 10000; // 总数据量
const itemHeight = 50; // 每个列表项的固定高度
const viewportHeight = 500; // 视口高度

// 计算视口内可以容纳的列表项数量，并增加一些缓冲区
const visibleItemCount = Math.ceil(viewportHeight / itemHeight) + 2; 

// 生成模拟数据
const allData = Array.from({ length: totalItems }, (_, index) => ({
  id: index,
  text: `项目 ${index + 1}`,
}));

// 2. 设置滚动占位符的总高度
placeholder.style.height = `${totalItems * itemHeight}px`;

// 3. 滚动事件处理函数
function handleScroll() {
  // 获取当前滚动位置
  const scrollTop = viewport.scrollTop;

  // 计算起始索引
  const startIndex = Math.floor(scrollTop / itemHeight);
  
  // 计算结束索引
  const endIndex = Math.min(startIndex + visibleItemCount, totalItems);

  // 截取可见区域的数据
  const visibleData = allData.slice(startIndex, endIndex);

  // 更新渲染容器的垂直位置
  // 这使得列表项看起来在正确的位置
  container.style.transform = `translateY(${startIndex * itemHeight}px)`;

  // 生成并渲染 DOM
  container.innerHTML = visibleData
    .map(item => `<div class="list-item">${item.text}</div>`)
    .join('');
}

// 4. 绑定事件并初次渲染
viewport.addEventListener('scroll', handleScroll);
handleScroll(); // 初始渲染第一屏

进阶思考

可变高度的列表项：如果列表项的高度不固定，实现会更复杂。通常需要一个预估高度，并在渲染后缓存真实高度，然后动态调整滚动占位符的总高度。
缓冲区域（Buffer）：在视口上下方多渲染几个列表项作为缓冲区，可以避免在快速滚动时出现白屏。
框架集成：在 React 或 Vue 等框架中，可以利用组件化的思想来封装虚拟滚动。社区也提供了成熟的库，如 react-window、react-virtualized 和 vue-virtual-scroller，它们处理了更多边界情况，可以直接在项目中使用。

总结

虚拟滚动是前端性能优化中的一个重要技术，它通过巧妙的设计，用极小的 DOM 开销实现了超长列表的流畅滚动。理解其原理并能够手动实现，对于处理大数据量渲染场景非常有帮助。

虚拟滚动 ​

什么是虚拟滚动？ ​

为什么需要虚拟滚动？ ​

虚拟滚动的实现原理 ​

实际案例：固定高度列表的虚拟滚动 ​

HTML 结构 ​

CSS 样式 ​

JavaScript 实现 ​

进阶思考 ​

总结 ​