手撸虚拟滚动，开启前端新体验

2023-02-04 23:48:21

虚拟滚动：提升大规模数据列表性能的秘诀

在现代网络应用中，我们经常需要处理大量数据。当这些数据以列表形式呈现时，渲染整个列表会给浏览器带来巨大的压力，导致页面卡顿。而虚拟滚动是一种巧妙的技术，可以解决这个问题，让你的大规模数据列表滚动起来顺滑无比。

虚拟滚动的工作原理

虚拟滚动的核心思想是，只渲染当前可见部分的列表项，而隐藏其他部分。当用户滚动列表时，虚拟滚动算法会根据滚动条的位置，动态地计算出哪些列表项是可见的，并只渲染这些列表项。这样一来，浏览器就不必同时处理整个列表中的所有数据，大大减少了渲染压力。

如何实现虚拟滚动

实现虚拟滚动并不复杂，这里有一个分步指南：

设置容器和滚动条元素 ：首先，你需要创建一个容器元素来容纳列表，以及一个滚动条元素来监听滚动事件。
监听滚动事件 ：在滚动条元素上监听 scroll 事件，并在事件处理函数中计算当前可见的列表项索引范围。
渲染可见列表项 ：根据计算出的索引范围，渲染可见的列表项，并将其他列表项隐藏。

优化虚拟滚动

为了让虚拟滚动更加高效，这里有一些优化措施：

节流：使用节流函数来减少渲染次数，防止滚动条频繁触发渲染。
惰性加载 ：对于特别长的列表，使用惰性加载技术，只在需要时加载数据。
元素回收 ：当列表项滚动出可视区域后，将其回收以减少内存占用。

虚拟滚动示例

下面是一个简单的虚拟滚动示例：

<div id="list-container">
  <ul id="list">
    <!-- 列表项 -->
  </ul>
</div>

<div id="scrollbar">
  <!-- 滚动条 -->
</div>

const listContainer = document.getElementById('list-container');
const list = document.getElementById('list');
const scrollbar = document.getElementById('scrollbar');

scrollbar.addEventListener('scroll', () => {
  // 计算可见列表项索引范围
  const startIndex = Math.floor(scrollbar.scrollTop / listContainer.clientHeight);
  const endIndex = Math.ceil((scrollbar.scrollTop + scrollbar.clientHeight) / listContainer.clientHeight);

  // 渲染可见列表项
  for (let i = startIndex; i <= endIndex; i++) {
    list.children[i].style.display = 'block';
  }

  // 隐藏其他列表项
  for (let i = 0; i < list.children.length; i++) {
    if (i < startIndex || i > endIndex) {
      list.children[i].style.display = 'none';
    }
  }
});