前端进阶之虚拟滚动

虚拟滚动（Virtual Scrolling）是一种性能优化技术，它只渲染当前视口（Viewport）中的元素，而非全部元素。当用户滚动时，它会动态的加载和卸载元素。这种方法对于长列表非常有效，可以显著提高性能。

以下是一个简单的虚拟滚动的实现步骤：

首先，你需要一个容器元素，它的高度是所有列表项高度之和。这样可以保证滚动条的正确性。

然后，你需要监听容器的滚动事件。当滚动事件发生时，计算当前视口中应该显示哪些列表项。

根据计算结果，动态的添加和删除列表项。只渲染和保留视口中的列表项。

以下是一个简单的实现：

let start = 0;
let end = 20;
const total = 10000; // 假设有10000条数据
const itemHeight = 20; // 每条数据的高度为20px

// 创建一个容器元素
const container = document.createElement('div');
container.style.height = `${total * itemHeight}px`;
container.style.overflow = 'auto';

// 创建一个视口元素
const viewport = document.createElement('div');
container.appendChild(viewport);

// 渲染函数
function render() {
  // 清空视口
  viewport.innerHTML = '';
  // 计算当前视口中应该显示的列表项
  for (let i = start; i < end; i++) {
    const item = document.createElement('div');
    item.style.height = `${itemHeight}px`;
    item.textContent = `Item ${i}`;
    viewport.appendChild(item);
  }
}

// 监听滚动事件
container.addEventListener('scroll', (event) => {
  const scrollTop = event.target.scrollTop;
  start = Math.floor(scrollTop / itemHeight);
  end = start + 20;
  render();
});

render();