Что такое виртуализация списков и как она реализуется?

Виртуализация списка (windowing) — приём, при котором в DOM рендерятся только видимые элементы длинного списка, а остальные не создаются. Так список из десятков тысяч строк работает без задержек.

Зачем нужна

Каждый DOM-узел стоит памяти и времени на layout и paint. 10 000 строк в DOM делают прокрутку и первый рендер медленными, а виртуализация держит в DOM только несколько десятков элементов.

Как работает

1. Контейнеру задают фиксированную высоту и overflow: auto.
2. Внутри создают распорку с полной высотой списка (количество × высота строки), чтобы работала полоса прокрутки.
3. По scrollTop вычисляют индексы видимого диапазона.
4. Рендерят только эти строки и смещают их через transform: translateY(...).

const start = Math.floor(scrollTop / rowHeight);
const end = Math.min(items.length, start + Math.ceil(viewportHeight / rowHeight) + overscan);
const visible = items.slice(start, end);

overscan — несколько строк запаса сверху и снизу, чтобы при быстрой прокрутке не мелькали пустоты.

Сложности

• Переменная высота строк: нужна измеряющая логика и кеш высот.
• Доступность: невидимые элементы отсутствуют в DOM, поэтому поиск по странице и скринридеры видят только часть списка.
• Фокус и анкоры: при удалении элементов из DOM теряется состояние.

Готовые решения

react-window, react-virtuoso, @tanstack/virtual, vue-virtual-scroller. Для простых случаев помогает CSS content-visibility: auto.

Коротко для собеседования

Виртуализация рендерит только видимую часть списка и смещает её по позиции прокрутки; общий размер имитирует распорка. Применяют для очень длинных списков, учитывая переменную высоту и доступность.