Виртуализация списка — это техника оптимизации отображения длинных списков в интерфейсе, при которой в DOM рендерятся только видимые пользователю элементы, а остальные — нет. Это значительно снижает нагрузку на браузер и повышает производительность.

Технически в JavaScript это реализуется так:

Отслеживается размер контейнера и высота одного элемента списка.
Вычисляется, сколько элементов помещается в видимую область.
В DOM рендерятся только эти элементы плюс небольшой запас сверху и снизу для плавности прокрутки.
При прокрутке обновляется набор отображаемых элементов, а контейнеру задаётся общая высота, чтобы скроллбар соответствовал полному списку.

Пример упрощённой реализации на React:

function VirtualList({ items, itemHeight, height }) {
  const [scrollTop, setScrollTop] = React.useState(0);
  const totalHeight = items.length * itemHeight;
  const startIndex = Math.floor(scrollTop / itemHeight);
  const visibleCount = Math.ceil(height / itemHeight);
  const visibleItems = items.slice(startIndex, startIndex + visibleCount);

  const offsetY = startIndex * itemHeight;

  return (
    <div style={{ height, overflowY: 'auto' }} onScroll={e => setScrollTop(e.currentTarget.scrollTop)}>
      <div style={{ height: totalHeight, position: 'relative' }}>
        <div style={{ transform: `translateY(${offsetY}px)`, position: 'absolute', top: 0, left: 0, right: 0 }}>
          {visibleItems.map(item => (
            <div key={item.id} style={{ height: itemHeight }}>
              {item.content}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Таким образом, браузер работает только с небольшим числом элементов, что улучшает производительность при работе с большими списками.

Как работает виртуализация списка? Как это реализовано технически через JavaScript?