Навіщо використовують virtual DOM?

JavaScriptMiddle~3 хв читання

1. Що таке Virtual DOM

Virtual DOM (віртуальний DOM) - це легка, віртуальна копія реального DOM-дерева, що зберігається в пам'яті (у JS), а не в браузері.

Кожен елемент сторінки представляється звичайним JS-об'єктом, наприклад:

javascript

{
  type: 'div',
  props: { className: 'card' },
  children: [
    { type: 'h1', props: { children: 'Заголовок' } },
    { type: 'p', props: { children: 'Опис' } }
  ]
}

Цей об'єкт і є "віртуальним DOM-вузлом" (VNode). Він не пов'язаний напряму з браузерним DOM, тому операції з ним дуже швидкі.

2. Як працює Virtual DOM (по кроках)

Уявімо, що застосунок оновлює інтерфейс:

Застосунок змінює стан (state):

javascript

setCount(count + 1);

Фреймворк створює нове Virtual DOM-дерево (на основі поточного стану компонента).
Порівнює нове дерево з попереднім (diffing) → обчислює, що реально змінилося.
Оновлює лише змінені вузли в реальному DOM (через мінімальну кількість операцій).

Приклад:

javascript

// Було
<div>
  <h1>Лічильник: 5</h1>
</div>

// Стало
<div>
  <h1>Лічильник: 6</h1>
</div>

React не перестворює весь <div>, він бачить, що змінилася лише текстова нода всередині <h1>, і оновлює тільки її.

3. Навіщо це потрібно

Робота з реальним DOM - повільна: кожна зміна викликає reflow / repaint (перерахунок стилів, layout і перемальовування).

Virtual DOM вирішує проблему так:

Звичайний DOM	Virtual DOM
Зміни одразу торкаються браузера	Зміни відбуваються в пам'яті
Кожен апдейт викликає reflow	Фреймворк сам вирішує, коли оновити DOM
Потрібно вручну керувати оновленнями	Алгоритм сам оптимізує "дифф"
Багато дрібних операцій	Кілька "батчів" оновлень

4. Ключові переваги Virtual DOM

Перевага	Що дає
Менше операцій з DOM	Оновлюються лише реальні зміни
Оптимізація ререндерів	React/Vue порівнюють старе і нове дерево
Зручність декларативного UI	"Що малювати" замість "як оновлювати"
Незалежність від платформи	VDOM можна рендерити не лише в браузері (React Native, SSR)
Інваріантність порядку оновлень	Не потрібно думати про послідовність маніпуляцій

5. Алгоритм порівняння (diffing)

Щоб зрозуміти, які вузли змінилися, Virtual DOM використовує diff-алгоритм.

Порівнює за ключами і типами елементів.
Якщо type збігається → порівнює props і children.
Якщо ні - старий вузол видаляється, новий створюється.
Алгоритм оптимізований → складність приблизно O(n).

Приклад:

javascript

<ul>
  <li key="1">A</li>
  <li key="2">B</li>
  <li key="3">C</li>
</ul>

Якщо B видаляється - React не перестворює C, тому що в нього той самий ключ, і він "переїжджає" вгору.

6. Чому Virtual DOM все ще не "безкоштовний"

Побудова і порівняння віртуальних дерев теж займає час.
При дуже частих оновленнях (анімації, canvas) - VDOM може бути повільнішим.
Тому React/Vue застосовують батчинг оновлень (групують їх за кадр) і хуки на кшталт useMemo / PureComponent.

7. Альтернативи і розвиток ідеї

Підхід	Особливість	Приклад
Virtual DOM (дифф-дерево)	Оновлює мінімальні частини	React, Vue 2
Incremental DOM	Одразу генерує патчі без diff	Svelte (частково), lit-html
Compile-time diffing	Код компілюється в оптимальний JS без VDOM	Svelte, Solid.js
Fine-grained reactivity	Змінюється лише конкретний сигнал/комірка	Solid.js, Vue 3 (composition API)

Сучасні фреймворки поступово відходять від "глобального Virtual DOM" до точкової реактивності (Signal-based UI).

8. Коротке резюме

Що	Пояснення
Virtual DOM	JS-представлення реального DOM у пам'яті
Навіщо	Зменшити кількість прямих операцій з DOM
Як	Порівнює старе і нове дерево, оновлює лише змінені частини
Плюси	Швидше, простіше, декларативно
Мінуси	Не безкоштовний, додає шар абстракції
Альтернатива	Svelte / Solid - без глобального VDOM (компілятор сам знає, що міняти)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.