Optimización del rendimiento de front-end: use el desplazamiento virtual para mejorar el rendimiento de representación de listas largas

En el desarrollo front-end, a menudo nos encontramos con escenarios en los que es necesario representar una gran cantidad de datos, como listas de productos en sitios web de comercio electrónico, flujos de información en plataformas sociales, etc. Cuando la cantidad de datos es grande, la presentación directa de todos los datos en la página hará que la página se congele o incluso se bloquee. Para resolver este problema, podemos utilizar la tecnología de desplazamiento virtual (Virtual Scrolling) para mejorar el rendimiento de la representación de listas largas.

Este artículo presentará el principio del desplazamiento virtual en detalle y demostrará cómo implementar el desplazamiento virtual a través de un ejemplo simple.

Principio del desplazamiento virtual

La idea central del desplazamiento virtual es representar solo los elementos de la lista en el área visible, no todos los datos. Cuando el usuario se desplaza por la página, calculamos dinámicamente los elementos de la lista en el área visible actual y representamos solo esta parte de los datos. De esta manera, no importa cuán larga sea la lista, solo necesitamos mantener una cierta cantidad de nodos DOM, lo que mejora mucho el rendimiento.

Ejemplo: implementar un desplazamiento virtual simple

Para demostrar la implementación del desplazamiento virtual, crearemos una lista larga simple. Cada elemento de la lista consta de un número de secuencia y un cuadrado de un color aleatorio.

Primero, necesitamos crear una matriz con muchos datos:

javascript复制
const itemCount = 10000;
const items = Array.from({ length: itemCount }, (_, index) => ({
  id: index,
  color: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
}));

A continuación, creamos un VirtualListcomponente llamado para implementar el desplazamiento virtual. Este componente necesita recibir los siguientes parámetros:

items: lista de datos
itemHeight: la altura del elemento de la lista
visibleCount: el número de elementos de la lista en el área visible

javascript复制
class VirtualList {
  constructor({ items, itemHeight, visibleCount }) {
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = visibleCount;
    this.init();
  }

  // ...
}

En initel método, necesitamos crear un elemento contenedor y establecer sus propiedades de altura y desbordamiento. Al mismo tiempo, necesitamos crear un elemento de marcador de posición para expandir la altura del contenedor para que pueda desplazarse normalmente.

javascript复制
init() {
  this.container = document.createElement('div');
  this.container.style.height = `${this.visibleCount * this.itemHeight}px`;
  this.container.style.overflow = 'auto';

  this.placeholder = document.createElement('div');
  this.placeholder.style.height = `${this.items.length * this.itemHeight}px`;
  this.container.appendChild(this.placeholder);

  this.renderItems();
  this.bindEvents();
}

En renderItemsel método, necesitamos calcular los elementos de la lista en el área visible actual y representarlos en la página.

javascript复制
renderItems() {
  const scrollTop = this.container.scrollTop;
  const startIndex = Math.floor(scrollTop / this.itemHeight);
  const endIndex = Math.min(startIndex + this.visibleCount, this.items.length);

  const fragment = document.createDocumentFragment();
  for (let i = startIndex; i < endIndex; i++) {
    const item = this.items[i];
    const itemElement = document.createElement('div');
    itemElement.style.height = `${this.itemHeight}px`;
    itemElement.style.backgroundColor = item.color;
    itemElement.textContent = `Item ${item.id}`;
    fragment.appendChild(itemElement);
  }

  this.container.innerHTML = '';
  this.container.appendChild(this.placeholder);
  this.container.appendChild(fragment);
}

Finalmente, debemos escuchar el scrollevento del contenedor para actualizar los elementos de la lista a medida que el usuario se desplaza por la página.

javascript复制
bindEvents() {
  this.container.addEventListener('scroll', () => {
    this.renderItems();
  });
}

Ahora podemos crear una VirtualListinstancia de y agregarla a la página:

javascript复制
const virtualList = new VirtualList({
  items,
  itemHeight: 50,
  visibleCount: 10,
});

document.body.appendChild(virtualList.container);

Con este sencillo ejemplo, implementamos una lista larga con desplazamiento virtual. Aunque este ejemplo es relativamente simple, demuestra los fundamentos del desplazamiento virtual. En proyectos reales, podemos optimizarlo y ampliarlo según sea necesario.

Resumir

虚拟滚动是一种提升长列表渲染性能的有效方法。通过只渲染可视区域内的列表项，我们可以大大减少 DOM 节点的数量，从而提高页面性能。希望本文能帮助你理解虚拟滚动的原理，并在实际项目中应用这一技术。