Зачем нужна прослойка между приложением и реальным DOM?

Virtual DOM и прослойка между приложением и реальным DOM

Virtual DOM (виртуальный DOM) — это концептуальная прослойка между кодом приложения и реальным DOM браузера. Это одна из ключевых идей React, которая обеспечивает производительность и удобство разработки.

Проблема: Прямая работа с DOM

В традиционном JavaScript работа с DOM дорогая в плане производительности:

// Плохо — прямое изменение DOM
for (let i = 0; i < 1000; i++) {
  const item = document.createElement('div');
  item.textContent = `Item ${i}`;
  document.getElementById('list').appendChild(item); // 1000 операций!
}

Проблемы:

1. Каждое изменение DOM вызывает reflow и repaint — браузер пересчитывает разметку
2. Медленно и неэффективно — для 1000 элементов 1000 перерисовок
3. Сложно управлять — нужно вручную отслеживать изменения
4. Ошибки легко — можно забыть обновить элемент или потерять состояние

Решение: Virtual DOM

Virtual DOM — это JavaScript-объект, который представляет структуру реального DOM:

// Реальный DOM
<div id="list">
  <item>1</item>
  <item>2</item>
</div>

// Virtual DOM (JavaScript объект)
{
  type: 'div',
  props: { id: 'list' },
  children: [
    { type: 'item', children: '1' },
    { type: 'item', children: '2' }
  ]
}

React работает так:

1. Код компонента -> Virtual DOM (JSX)
2. Вычисляет различия (diffing)
3. Обновляет только изменённые части реального DOM

Как это работает в React

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Когда пользователь нажимает кнопку:

1. Обновляется состояние -> count = 1
2. React создаёт новый Virtual DOM:

   {
     type: 'div',
     children: [
       { type: 'p', children: 'Count: 1' },
       { type: 'button', children: 'Increment' }
     ]
   }
   

3. React сравнивает с предыдущим Virtual DOM (diffing)
4. Находит различия — только текст в <p> изменился
5. Обновляет ТОЛЬКО этот элемент в реальном DOM:

   // Вместо пересоздания всего блока
   document.querySelector('p').textContent = 'Count: 1';
   

Преимущества Virtual DOM

1. Производительность

// React автоматически батчит обновления
const [items, setItems] = useState([]);

const addItems = () => {
  // React объединит эти 3 setState в один Update
  setItems(prev => [...prev, 'item1']);
  setItems(prev => [...prev, 'item2']);
  setItems(prev => [...prev, 'item3']);
  // Реальный DOM обновится один раз, не три!
};

Вместо 1000 перерисовок, браузер выполняет 1 обновление.

2. Удобство разработки

// Просто описываем, как должно выглядеть UI
function UserProfile({ user }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <img src={user.avatar} alt="Avatar" />
    </div>
  );
}

// React сам разбирается, что менять в DOM

Без Virtual DOM пришлось бы вручную:

// Плохо
document.querySelector('h1').textContent = user.name;
document.querySelector('p').textContent = user.email;
document.querySelector('img').src = user.avatar;

3. Предсказуемость

// Всегда один и тот же результат
// Virtual DOM убирает зависимость от текущего состояния DOM
function TodoItem({ todo, onToggle }) {
  return (
    <li className={todo.done ? 'done' : ''}>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => onToggle(todo.id)}
      />
      <span>{todo.text}</span>
    </li>
  );
}

Перевести инструкцию на чистый JavaScript сложнее.

4. Синхронизация состояния и UI

// State всегда отражает UI
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);

useEffect(() => {
  const fetchUser = async () => {
    setLoading(true);
    const data = await fetch('/api/user').then(r => r.json());
    setUser(data);
    setLoading(false);
  };
  fetchUser();
}, []);

// UI всегда соответствует state
return loading ? <Spinner /> : <UserCard user={user} />;

Reconciliation Algorithm (алгоритм согласования)

React использует diffing algorithm для сравнения Virtual DOM:

// Старый Virtual DOM
<ul>
  <li key="1">Alice</li>
  <li key="2">Bob</li>
</ul>

// Новый Virtual DOM (добавили Carol)
<ul>
  <li key="1">Alice</li>
  <li key="2">Bob</li>
  <li key="3">Carol</li>
</ul>

// React находит различие и добавляет ТОЛЬКО новый <li>
dom.appendChild(document.createElement('li')); // Одна операция!

Поэтому key важна в списках:

// Плохо — без key
items.map(item => <TodoItem todo={item} />) // React не узнает порядок

// Хорошо — с key
items.map(item => <TodoItem key={item.id} todo={item} />)

Без key React может удалить не тот элемент.

Другие прослойки в современном фронтенде

Idea Virtual DOM расширена в других фреймворках:

Vue.js — Reactive System

const state = reactive({ count: 0 });
const double = computed(() => state.count * 2);

// Автоматически отслеживает зависимости
watch(() => state.count, (newVal) => {
  console.log(`Count changed to ${newVal}`);
});

Svelte — Compiler (no Virtual DOM)

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Count: {count}
</button>

Svelte компилирует в оптимальный код, без Virtual DOM.

Qwik — Resumability

export default component$(() => {
  const state = useSignal(0);
  
  return (
    <button onClick$={() => state.value++}>
      Count: {state.value}
    </button>
  );
});

Qwik пропускает JavaScript при инициализации.

React Fiber — оптимизация Virtual DOM

Модерный React использует Fiber architecture:

// Старый React — синхронный
render(); // Блокирует всё, пока не завершится

// React 16+ (Fiber) — асинхронный
schedule(() => render()); // Может быть прерван

Преимущества:

• Priority-based updates — важные обновления раньше
• Interruption — можно отменить рендеринг, если появилось более важное
• Incremental rendering — рендеринг можно разбить на части

flushSync(() => setCount(1)); // Срочно
setCount(2);                   // Может подождать

Когда Virtual DOM может быть неэффективен

// Плохо — очень частые обновления
const [position, setPosition] = useState({ x: 0, y: 0 });

window.addEventListener('mousemove', (e) => {
  setPosition({ x: e.clientX, y: e.clientY }); // 1000 раз в секунду!
});

Лучше использовать ref напрямую:

const posRef = useRef({ x: 0, y: 0 });

window.addEventListener('mousemove', (e) => {
  posRef.current = { x: e.clientX, y: e.clientY };
  // Обновляем DOM напрямую, не через Virtual DOM
});

Итоговая схема

Код приложения (JSX / Components)
         |
         v
  Virtual DOM (JavaScript object)
         |
    diffing algorithm
         |
         v
Изменения, которые нужно сделать
         |
         v
    Реальный DOM (обновляется)
         |
         v
  Браузер перерисовывает (repaint)

Заключение

Virtual DOM — это прослойка абстракции, которая:

1. Повышает производительность — обновляет только необходимое
2. Упрощает код — просто описываем UI, забываем о DOM
3. Предотвращает ошибки — React отслеживает изменения
4. Позволяет оптимизировать — возможны умные алгоритмы обновления

Это один из основных факторов популярности React.