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

Question

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

YeaHub · Accepted Answer

Рендер большого количества DOM-элементов — одна из самых частых причин проблем с производительностью.В чём проблема обычных списковЕсли отрендерить список из тысяч элементов:растёт размер DOMувеличивается время layout и paintкаждый ререндер становится дорогимДаже если пользователь видит только 20 элементов, браузер обрабатывает все.Идея виртуализацииВиртуализация строится на простой идее:пользователь видит только часть списказначит, рендерить нужно только еёОстальное:заменяется пустыми отступамиподгружается при скроллеКак это работает концептуальноРассчитывается высота элементовОпределяется текущая зона видимостиРендерятся только элементы внутри неёПри скролле набор элементов меняетсяЧто это даётрезкое уменьшение DOM-узловбыстрые ререндерыплавный скроллКогда виртуализация обязательнасписки на сотни и тысячи элементовтаблицыленты с динамическими даннымиКраткий выводВиртуализация позволяет рендерить большие списки без потери производительности, ограничивая количество DOM-элементов только видимой областью. Это базовая техника оптимизации для крупных React-приложений.