深入浅出领略最小化虚拟列表的魅力，一文解读JS虚拟列表实现全过程

前端

2023-10-18 03:50:24

一、揭开虚拟列表的面纱：原理与优势

虚拟列表是一种高效的列表渲染技术，它能够在不加载全部数据的情况下，仅加载和渲染当前可见的部分数据，从而减少内存消耗和提高渲染速度，尤其适用于数据量庞大的列表展示场景。

在本质上，虚拟列表并非真实存在于内存中的数据集合，而是一种模拟长列表的数据结构。它通过滚动的scrollTop属性来确定当前可见的区域，并仅加载和渲染该区域内的部分数据，从而实现性能优化。

使用虚拟列表可以带来诸多优势：

减少内存消耗： 由于虚拟列表仅加载和渲染当前可见的数据，因此能够显著降低内存消耗，尤其是在数据量庞大的场景中。
提高渲染速度： 仅加载和渲染部分数据可以减少浏览器渲染引擎的工作量，从而提高渲染速度，改善用户体验。
优化滚动性能： 虚拟列表通过动态加载数据的方式，使滚动操作更加流畅，减少页面卡顿现象。

二、30行JS代码，实现虚拟列表

为了帮助读者更好地理解虚拟列表的实现原理和应用技巧，我们将通过30个精心设计的JS代码范例，一步一步地剖析虚拟列表的实现过程。

1. 定义虚拟列表组件类

class VirtualList {
  constructor(container, data) {
    this.container = container;
    this.data = data;

    this.start = 0;
    this.end = 0;

    this.render();
  }

  render() {
    // 计算当前可见区域的起始和结束索引
    this.calculateRange();

    // 清空容器中的内容
    this.container.innerHTML = '';

    // 循环遍历当前可见区域的数据，并将其渲染到容器中
    for (let i = this.start; i <= this.end; i++) {
      const item = this.data[i];
      const listItem = document.createElement('li');
      listItem.textContent = item;
      this.container.appendChild(listItem);
    }
  }

  calculateRange() {
    // 获取容器的滚动位置
    const scrollTop = this.container.scrollTop;

    // 计算当前可见区域的起始和结束索引
    this.start = Math.floor(scrollTop / this.itemHeight);
    this.end = Math.ceil((scrollTop + this.container.clientHeight) / this.itemHeight) - 1;

    // 确保起始和结束索引不超出数据范围
    this.start = Math.max(0, this.start);
    this.end = Math.min(this.data.length - 1, this.end);
  }
}

2. 实例化虚拟列表组件并加载数据

const container = document.getElementById('virtual-list');
const data = [
  'Item 1',
  'Item 2',
  'Item 3',
  'Item 4',
  'Item 5',
  'Item 6',
  'Item 7',
  'Item 8',
  'Item 9',
  'Item 10'
];

const virtualList = new VirtualList(container, data);