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

Question

Виртуализация уменьшает количество DOM-элементов, с которыми работает браузер и React. Это снижает затраты на рендер, layout и repaint. Также уменьшается объём работы при обновлениях состояния. В результате интерфейс становится быстрее и стабильнее.

YeaHub · Accepted Answer

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