Як відбувається рендеринг Web-сторінки

Зміст

Коли браузер отримує HTML від сервера, він проходить кілька етапів перед тим, як ви побачите сторінку.

1. Парсинг HTML → DOM

Браузер читає HTML і будує DOM (Document Object Model) — дерево елементів. Кожен тег стає вузлом дерева.

2. Парсинг CSS → CSSOM

Паралельно браузер обробляє CSS і будує CSSOM (CSS Object Model) — дерево стилів.

3. Render Tree

DOM + CSSOM = Render Tree. Це дерево містить тільки видимі елементи. Елементи з display: none сюди не потрапляють.

4. Layout

Браузер розраховує позицію і розміри кожного елемента — де що буде на екрані.

5. Paint

Відмальовування пікселів: кольори, тіні, тексти, картинки.

6. Composite

Шари об’єднуються у фінальне зображення. Елементи з transform або opacity виносяться в окремі шари — це важливо для оптимізації.

Reflow і Repaint

Коли користувач взаємодіє зі сторінкою, браузер може перераховувати layout або перемальовувати елементи.

Repaint — зміна стилів, що не впливають на геометрію: колір, тінь, видимість. Браузер просто перемальовує пікселі.

Reflow — зміна структури або розмірів. Браузер перераховує layout всіх елементів, які залежать від зміненого. Це дорога операція.

Reflow завжди викликає Repaint. Repaint не викликає Reflow.

Що провокує Reflow

Дія	Що відбувається
Зміна width, height, margin, padding	Reflow
Зміна font-size	Reflow
Додавання/видалення елементів з DOM	Reflow
Зміна display	Reflow
Читання offsetWidth, scrollTop	Примусовий Reflow
Зміна color, background, box-shadow	Тільки Repaint
Зміна transform, opacity	Ні Reflow, ні Repaint (композитинг)

Найгірше — читання геометрії (offsetWidth, clientHeight) після зміни стилів. Браузер змушений робити синхронний Reflow.

Оптимізація

HTML і DOM

Простіший DOM = швидший рендеринг. Уникайте глибокої вкладеності та зайвих обгорток. Якщо сторінка «скаче» з 15 FPS — перше, що варто перевірити.

CSS

Уникайте: складні селектори, масивні анімації властивостей, що провокують Reflow (width, height, top, left).

Для анімацій: використовуйте transform і opacity — вони не викликають Reflow і виконуються на GPU.

css

/* Погано — провокує Reflow */
.box { left: 0; transition: left 0.3s; }
.box:hover { left: 100px; }

/* Добре — тільки композитинг */
.box { transform: translateX(0); transition: transform 0.3s; }
.box:hover { transform: translateX(100px); }

Зображення

Формати: WebP для фото, SVG для іконок.

Розміри: не завантажуйте 4000px картинку для прев’ю 200px.

srcset: адаптивні зображення для різних екранів.

html

<img src="photo.jpg" 
     srcset="photo-480.webp 480w, photo-800.webp 800w" 
     sizes="(max-width: 600px) 480px, 800px">

JavaScript

Мінімізуйте читання геометрії в циклах. Якщо треба — прочитайте все спочатку, потім змінюйте.

javascript

// Погано — Reflow на кожній ітерації
elements.forEach(el => {
  el.style.width = el.offsetWidth + 10 + 'px';
});

// Добре — один Reflow
const widths = elements.map(el => el.offsetWidth);
elements.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});

Ресурси

Стиснення: gzip або brotli для HTML, CSS, JS.

Кешування: налаштуйте правильні заголовки Cache-Control.

Сторонні скрипти: кожен додатковий скрипт — це час. Аналітика, чати, віджети — все сповільнює.

Отже

Браузер робить багато роботи: парсинг → DOM → CSSOM → Render Tree → Layout → Paint → Composite.

Reflow — дорога операція, її варто мінімізувати. Анімації через transform і opacity — ваші друзі. Простий DOM, оптимізовані картинки, стиснені ресурси — база швидкої сторінки.