虚拟列表渲染10万条数据

最近在做项目的时候遇到这个问题，查了不少资料总算搞明白了。把过程记下来，方便以后查阅，也希望能帮到有同样需求的朋友。

先搞清楚原理

虚拟列表的底层原理涉及事件处理。用代码演示比画图更直观：

class ApiClient {
  #baseUrl;
  constructor(baseUrl) { this.#baseUrl = baseUrl; }

  async request(method, path, data = null) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 25000);
    try {
      const config = { method, headers: { 'Content-Type': 'application/json' }, signal: controller.signal };
      if (data && method !== 'GET') config.body = JSON.stringify(data);
      const response = await fetch(`${this.#baseUrl}${path}`, config);
      clearTimeout(timeoutId);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (err) {
      clearTimeout(timeoutId);
      throw err;
    }
  }

  get(path) { return this.request('GET', path); }
  post(path, data) { return this.request('POST', path, data); }
}

实际怎么用

写代码的时候，虚拟列表有几个常见写法。推荐用下面这种方式，代码更清晰，也更容易维护：

class EventBus {
  constructor() { this.events = new Map(); }
  on(event, callback) {
    if (!this.events.has(event)) this.events.set(event, []);
    this.events.get(event).push(callback);
    return () => this.off(event, callback);
  }
  off(event, callback) {
    const callbacks = this.events.get(event);
    if (callbacks) this.events.set(event, callbacks.filter(cb => cb !== callback));
  }
  emit(event, ...args) {
    const callbacks = this.events.get(event);
    if (callbacks) callbacks.forEach(cb => cb(...args));
  }
}

const bus = new EventBus();
bus.on('data', (d) => console.log('收到:', d));
bus.emit('data', { id: 27 });

进阶一点的用法

虚拟列表在复杂场景下的用法和简单场景差别挺大。主要是DOM操作与事件响应这块需要额外处理，代码如下：

容易踩的坑

说几个容易踩的坑。第一个是事件处理的问题，很多人在这上面栽过跟头。第二个是版本兼容性，不同版本行为可能不一样。第三个是边界情况，空值和异常输入要处理好。

写在最后

总结一下，虚拟列表的关键在于DOM操作与事件响应。掌握了这个，其他用法都是在这个基础上扩展。建议多写几个小demo练手，光看不动手容易忘。