За счет чего Virtual DOM более эффективен?

Эффективность Virtual DOM — не в том, что JS-объекты «быстрее DOM», а в том, как организованы обновления: минимальность, батчинг и дешёвое сравнение.

Почему прямые обновления DOM дороги

Каждая операция с реальным DOM может тянуть за собой пересчёт стилей, layout (reflow) и перерисовку. Наивный код усугубляет это:

• обновляет больше, чем нужно (перерисовать весь список ради одной строки, innerHTML = ...);
• чередует чтение и запись layout, вызывая многократные reflow;
• делает много мелких изменений подряд вместо одного пакета.

Что даёт Virtual DOM

• Дешёвое вычисление разницы: создание и сравнение JS-объектов на порядки дешевле операций с настоящими DOM-узлами. React может позволить себе пересобрать всё виртуальное дерево и найти отличия.
• Минимальный патч: к реальному DOM применяются только фактические отличия — изменился текст одной ячейки, обновится один текстовый узел.
• Батчинг: все изменения одного цикла обновления применяются одним пакетом в commit-фазе — браузер делает один reflow вместо десятков.
• Эвристики диффа за O(n): сравнение по уровням, по типу узла и по key — без честного (кубического) сравнения деревьев.

Честная оговорка

Идеально написанный ручной код с точечными обновлениями DOM быстрее: он не платит за дифф. Virtual DOM эффективен по сравнению с реалистичным ручным кодом в большом приложении — он системно гарантирует минимальность и батчинг, которые вручную поддерживать дорого и ошибкоопасно.

Коротко для собеседования

Virtual DOM эффективен за счёт: дешёвого диффа JS-объектов вместо дорогих проб на реальном DOM, применения только минимального набора отличий, батчинга изменений в один reflow и O(n)-эвристик сравнения (тип узла + key). Это автоматизация оптимизаций, которые вручную в большом приложении никто стабильно не делает.