За счёт чего виртуализация улучшает производительность?

Производительность интерфейса ограничена не только JavaScript, но и работой браузера с DOM.

Основные узкие места без виртуализации

При большом списке:

• создаётся тысячи DOM-узлов

• браузер тратит время на layout

• каждый ререндер затрагивает большой фрагмент дерева

Даже если элементы не видны, они участвуют в расчётах.

Что именно оптимизирует виртуализация

1. Количество DOM-узлов

   • рендерится только видимая часть

   • остальное заменяется пустыми отступами

2. Работа React

   • меньше компонентов участвует в reconciliation

   • быстрее проходит сравнение виртуального DOM

3. Работа браузера

   • меньше layout и paint

   • меньше памяти под DOM

Почему это особенно заметно при скролле

Скролл:

• происходит часто

• требует быстрых обновлений

Если DOM маленький, браузер успевает перерисовывать интерфейс без фризов.

Дополнительные эффекты

• снижается потребление памяти

• ускоряется initial render

• проще поддерживать 60 FPS

Краткий вывод

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