Как Virtual DOM оптимизирует рендеринг?
Рендеринг и производительность
Virtual DOM оптимизирует рендеринг за счёт организации обновлений: он позволяет вычислять минимальный набор правок и применять их пакетно.
Механизмы оптимизации
Дешёвое вычисление вместо дорогих проб. Создание и сравнение JS-объектов на порядки дешевле операций с настоящими DOM-узлами. React может позволить себе перестроить всё виртуальное дерево, чтобы выяснить, что реально изменилось, — с реальным DOM такой перебор был бы неприемлем.
Минимальный патч. Дифф выявляет точные отличия: из тысячи строк таблицы изменилась одна ячейка — в DOM уйдёт одна операция обновления текста, а не перерисовка таблицы.
Батчинг. Все правки одного цикла обновления применяются одним куском в commit-фазе: браузер делает один reflow/repaint вместо серии. Плюс несколько setState схлопываются в один цикл.
Переиспользование узлов. Узлы того же типа (и с тем же key в списках) не пересоздаются — обновляются атрибуты. Сохраняются фокус, ввод, скролл; экономится дорогое создание элементов.
O(n)-эвристики диффа. Сравнение по уровням, «разные типы — пересоздать», key для списков — линейная сложность вместо кубической.
Прерываемость (Fiber, React 18). Работа над виртуальным деревом — обычные вычисления: их можно разбить на куски, прервать ради срочного (ввод) и продолжить — тяжёлый рендер не блокирует интерактивность.
Граница возможностей
VDOM не делает рендер бесплатным: дифф и создание деревьев стоят CPU. Он оптимизирует DOM-операции, а лишние вызовы компонентов — задача разработчика (структура состояния, memo).
Коротко для собеседования
Virtual DOM оптимизирует так: дешёвый дифф JS-деревьев вычисляет минимальный набор правок; они применяются батчем (один reflow); узлы переиспользуются по типу и key (сохраняется фокус/скролл); эвристики держат сравнение за O(n); с Fiber работа прерываема и приоритизируема. Итог — минимум дорогих DOM-операций при декларативном коде.