Skip to main content

Чим Virtual DOM швидший за звичайний?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Virtual DOM швидший за звичайний DOM завдяки тому, як і коли відбуваються оновлення.

Ось у чому різниця:

1. Звичайний DOM

Коли ти напряму змінюєш DOM (наприклад, через document.querySelector().innerText = '...'), браузер одразу:

  • перераховує layout (reflow)
  • робить repaint
  • оновлює реальні пікселі на екрані

Навіть дрібні зміни запускають важкі процеси, особливо при множинних оновленнях.

2. Virtual DOM

Це легка JS-копія справжнього DOM у пам'яті. Фреймворки (наприклад, React) спочатку оновлюють цю копію, а потім:

  • порівнюють нову і стару версію (diffing)
  • обчислюють точкові зміни
  • роблять один мінімальний реальний апдейт у DOM

Чому це швидше:

  • немає зайвих reflow/repaint: вони відкладаються
  • зміни групуються і застосовуються одразу
  • зачіпається лише те, що дійсно змінилося
  • економиться робота рушія браузера

Підсумок:

Звичайний DOMVirtual DOM
Миттєві, важкі оновленняЛегкі, відкладені й оптимізовані
Багато прямих операційОдин розрахунок → одна точка входу
Браузер робить багато роботиФреймворк фільтрує, перш ніж віддати браузеру

Висновок: Virtual DOM пришвидшує роботу інтерфейсу за рахунок розумного проміжного шару, який знижує навантаження на реальний DOM і браузер. Це робить анімації, ререндер і взаємодію помітно плавнішими.

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

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

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

Запропонувати правку