Проблема отрисовки больших списков

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

Большинство этих узлов находятся за пределами экрана и невидимы, однако браузер всё равно должен создать, разместить и поддерживать каждый из них.

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

Даже простые действия могут выполняться рывками, когда движку приходится отслеживать и заново размещать десятки тысяч узлов.

Сильнее всего пользователи ощущают проблему при прокрутке огромного списка. Браузер перерисовывает содержимое и может заново вычислять компоновку по мере его перемещения, а при слишком большом числе узлов частота кадров падает ниже плавного уровня.

В результате прокрутка становится прерывистой и медленной, из-за чего интерфейс кажется неотзывчивым, как бы быстро ни работала остальная часть приложения.

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

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

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

Благодаря этому размер активного DOM остаётся небольшим независимо от количества элементов в данных, то есть размер DOM не зависит от размера набора данных.

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

Библиотека использует эти значения, чтобы в каждый момент выбирать для отрисовки точно нужный фрагмент элементов.

Виртуализацию реализуют несколько библиотек. react-virtualized обладает широкими возможностями, но имеет больший размер; react-window — более компактная специализированная переработка от того же автора; а TanStack Virtual — современный вариант без встроенного интерфейса.

Для большинства списков react-window предлагает отличный баланс простоты и производительности, поэтому этот курс посвящён именно ему.

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

Бесконечные ленты, большие таблицы данных и история чата — типичные сценарии, в которых оконный режим становится необходимостью, а не дополнительной возможностью.

Для коротких списков из нескольких десятков простых элементов виртуализация усложняет код, не давая заметной пользы. Накладные расходы на абсолютное позиционирование и измерения могут даже ухудшить результат.

Используйте оконный режим для действительно больших наборов данных, а для небольших обычного перебора достаточно: он проще и работает достаточно быстро.

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

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

Определите, когда виртуализация оправдана.

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

Среди react-virtualized и TanStack Virtual react-window — специализированный и лёгкий вариант. Используйте его для больших или тяжёлых списков, а для коротких и простых списков откажитесь от него.