Модуль 2

Як працює браузер і Virtual DOM

Ось готовий урок, створений за твоїм майстер-промптом.

🎓 CS50-Style: Як працює браузер і магія Virtual DOM

Привіт, друзі! Це CS50... ну, майже. Я радий бачити вас тут.

Сьогодні ми зазирнемо під капот інтернету. Ми натискаємо кнопки, скролимо стрічки, і все це виглядає миттєвим і плавним. Але що насправді відбувається, коли ви змінюєте одне слово на веб-сторінці?

1. 🔥 Вступ: Чому ваш браузер іноді "гальмує"?

Уявіть собі, що ви — архітектор, який будує величезний будинок із тисячі цеглин (це наша веб-сторінка).

Раптом замовник каже: "Слухай, мені не подобається колір однієї цеглини на третьому поверсі. Заміни її".

Якби будівництво працювало як старі веб-браузери, вам довелося б: 1. Знести будинок. 2. Побудувати його наново з фундаменту, тільки заради цієї однієї цеглини.

Звучить абсурдно, правда? Це дорого, довго і неефективно.

Але саме це ми робимо з браузером, коли неправильно оновлюємо сторінку. Ми змушуємо його перераховувати положення кожного пікселя, навіть якщо змінилася лише одна літера.

Питання до вас: Чи помічали ви коли-небудь, як "важкі" сайти починають смикатися при скролі або повільно реагують на кліки? Це не тому, що ваш комп'ютер слабкий. Це тому, що браузер займається "будівництвом будинку з нуля" по 60 разів на секунду.

Сьогодні ми розберемося, як браузер малює сторінку і як Virtual DOM (технологія, що стоїть за React та Vue) рятує нас від цього "архітектурного кошмару".

2. 🧠 Теоретична база: Від HTML до Пікселів

Щоб зрозуміти рішення, треба зрозуміти проблему. Давайте прослідкуємо шлях від коду до картинки.

Як працює браузер (Critical Rendering Path)

Коли браузер отримує ваш код, він проходить 4 головні етапи:

  1. DOM (Document Object Model): Браузер читає HTML і будує дерево тегів. Це каркас.
  2. CSSOM (CSS Object Model): Браузер читає стилі.
  3. Render Tree (Дерево рендерингу): Браузер об'єднує DOM і CSSOM. Він відкидає все, що невидиме (наприклад, display: none), і залишає те, що треба малювати.
  4. Layout (або Reflow) — 🔴 НАЙДОРОЖЧА ОПЕРАЦІЯ: Браузер бере лінійку і калькулятор. Він вираховує точні координати кожного елемента на екрані. Де саме буде ця кнопка? Якої ширини цей текст?
  5. Paint (Малювання): Браузер зафарбовує пікселі.

Запам’ятайте: Найбільший ворог швидкодії — це Layout (Reflow). Кожного разу, коли ви змінюєте розмір елемента або додаєте новий у DOM, браузер змушений перераховувати геометрію всього навколо.

Порятунок: Virtual DOM

Тут на сцену виходить Virtual DOM.

Уявіть, що у вас є креслення будинку (Virtual DOM) і сам будинок (Real DOM). Працювати з кресленням на папері — легко і швидко. Ви можете стерти стіну гумкою за секунду. Знести реальну стіну — це дні роботи.

Як це працює "під капотом": 1. Копія: React створює легку копію вашого DOM у пам'яті (JavaScript об'єкт). 2. Зміни: Коли дані змінюються, React оновлює цей віртуальний об'єкт (це супершвидко, бо це просто математика в JS). 3. Diffing (Порівняння): React порівнює "нове креслення" зі "старим кресленням". Він знаходить різницю. "Ага, змінилася тільки ця цеглина!" 4. Reconciliation (Узгодження): React йде до реального браузера і каже: "Не чіпай нічого, просто заміни ось цей <span>".

Ми мінімізуємо звернення до реального DOM. Ми не робимо зайвих Reflow.

3. 🧪 Приклади: Від болю до елегантності

Приклад 1: "Наївний підхід" (Повільно)

Уявіть, що нам треба додати список із 1000 товарів.

// ❌ Поганий спосіб
const list = document.getElementById('shop-list');
const products = [...]; // 1000 товарів

products.forEach(product => {
  // Ми 1000 разів "смикаємо" реальний DOM
  // Браузер може спробувати 1000 разів перерахувати Layout!
  const item = document.createElement('li');
  item.innerText = product.name;
  list.appendChild(item);
});

Що тут відбувається? Ми стукаємо до браузера 1000 разів: "Намалюй! Намалюй! Намалюй!".

Приклад 2: Batching (Пакетне оновлення) — Принцип Virtual DOM

// ✅ Кращий спосіб (Vanilla JS аналог Virtual DOM)
const list = document.getElementById('shop-list');
// Створюємо "віртуальний контейнер" у пам'яті
const fragment = document.createDocumentFragment(); 

products.forEach(product => {
  const item = document.createElement('li');
  item.innerText = product.name;
  fragment.appendChild(item); // Працюємо лише в пам'яті
});

// Тільки ОДИН раз стукаємо до реального DOM
list.appendChild(fragment);

Приклад 3: Як це виглядає в React (Virtual DOM)

Ви пишете код декларативно. Ви не кажете "створи елемент, додай його". Ви кажете "ось як це має виглядати".

// React бере всю брудну роботу на себе
function ProductList({ products }) {
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Коли products зміниться (наприклад, ми відфільтруємо список), React: 1. Побудує нове дерево віртуального DOM. 2. Побачить, що 3 елементи зникли. 3. Видалить з реального DOM тільки ці 3 елементи. Інші 997 навіть не ворухнуться.

4. 🛠 Практична частина

Час закачати рукави! Спробуйте виконати ці завдання (можна усно або в редакторі коду):

  1. 🔹 Детектив Reflow: Подивіться на цей список дій. Які з них викличуть Reflow (перерахунок геометрії), а які — лише Repaint (зміна кольору)?

    • element.style.width = '100px'
    • element.style.color = 'red'
    • element.style.display = 'none'
    • element.style.visibility = 'hidden' (Підказка: зміна розміру впливає на сусідів, зміна кольору — ні).

  2. 🔹 Виправлення помилки: У вас є цикл, який зчитує ширину елемента (div.offsetWidth) і відразу змінює її (div.style.width = ...). Чому це називають "Layout Thrashing" і як це виправити?

  3. 🔹 Задача з ключами (Keys): У React ми завжди пишемо key={id} у списках. Уявіть, що ви не дали ключі, або використали індекс масиву (0, 1, 2...) як ключ. Потім ви видалили перший елемент списку.

    • Як Virtual DOM зрозуміє, що сталося?
    • Чому це може призвести до помилок (наприклад, інпути збережуть старі значення)?

  4. 🔹 Міні-кейс: Ви розробляєте чат. Повідомлення приходять дуже швидко (10 штук на секунду). Якщо додавати кожне повідомлення окремо в DOM, браузер зависне. Запропонуйте алгоритм оптимізації (підказка: згадайте буферизацію або throttle).

5. 💡 Мислення як у розробника

Як відрізнити новачка від сеньйора в цій темі?

  • Новачок думає: "DOM — це просто місце, куди я кидаю HTML". Він змінює стилі хаотично, зчитує властивості елементів у циклах, не думаючи про ціну цих операцій.
  • Досвідчений розробник знає: "DOM — це найвужче місце пляшки".
    • Він намагається мінімізувати кількість записів у DOM.
    • Він групує зміни (Batching).
    • Він використовує CSS-трансформації (transform, opacity) для анімацій, бо вони не викликають Layout і обробляються відеокартою (GPU), а не процесором.

Порада з практики: Ніколи не довіряйте своїм відчуттям щодо швидкості. Використовуйте вкладку Performance у Chrome DevTools. Якщо бачите там багато фіолетових стовпчиків (Rendering) і червоних трикутників — ви "ґвалтуєте" браузер.

6. 🧩 Підсумок

Отже, що ми сьогодні розібрали?

  1. Браузер — це художник, але трохи ледачий. Змушувати його перемальовувати всю картину (Reflow) заради однієї точки — дорого.
  2. Virtual DOM — це ваш менеджер. Він збирає всі ваші побажання, сортує їх, викидає дублікати і дає художнику (браузеру) чіткий, мінімальний список завдань.
  3. JavaScript працює швидко. DOM працює повільно. Virtual DOM — це міст між швидким JS і повільним DOM.

Тепер ви розумієте, чому React такий популярний. Не через магію, а через банальну економію ресурсів браузера.

А що далі? Тепер, коли ми вміємо ефективно малювати інтерфейс, постає питання: а де і як зберігати дані для цього інтерфейсу, щоб не заплутатися? На наступному уроці ми поговоримо про State Management і чому глобальні змінні — це зло.

Це був CS50... тобто, наш урок. Побачимось! 👋

← До списку уроків Наступний урок →