Володимир Шайтан Senior Full Stack Developer у UKEESS Software House, Викладач Комп'ютерної школи Hillel.

Рендеринг вебсторінки — один із ключових процесів, що перетворює ваш HTML і CSS у реальну картинку, видиму користувачеві. Розуміючи, як саме браузер «збирає» і відображає сторінку, можна істотно поліпшити продуктивність і загальний User Experience.

У цій статті з’ясуємо:

Як браузер парсить HTML і CSS.
Як утворюються DOM і CSSOM.
Що таке розрахунок розташування (layout).
Як усе завершується на етапі растеризації (painting).

Розгляньмо крок за кроком, як проходить уся магія за лаштунками браузера.

ПАРСИНГ HTML & CSS

Щойно ми натискаємо на лінк або вводимо URL, браузер отримує HTML-код сторінки й починає обробляти його покроково. Можна виділити декілька важливих етапів:

1. Браузер отримує HTML-документ

Коли браузер завантажує сторінку, він читає її символ за символом. Це найнижчий рівень, коли простий текст стає основою майбутнього DOM.

2. Токенізація

У процесі «токенізації» HTML-код розбивається на спеціальні «токени»:

Теги (наприклад, <div> або <h1>).
Текстовий вміст усередині тегів.
Атрибути (наприклад, class="container").
Закривальні теги (наприклад, </div>).

Токен — це «мітка», за якою браузер розуміє, що саме потрібно створити: чи це буде елемент <h1>, чи, можливо, атрибут class.

Приклад:

<div class="container">Hello</div>

Можна розбити на:

Відкривальний тег: <div>
Атрибут: class="container"
Текстовий вміст: Hello
Закривальний тег: </div>

3. Створення вузлів і побудова DOM

Отримавши всі токени, браузер починає з них «складати» дерево. Кожен елемент, кожен шматок тексту і кожен атрибут стають вузлами у DOM:

Element Node: <div>, <h1>, <p> тощо.
Text Node: тексти між тегами (наприклад, Hello World!).
Attribute Node: атрибути (наприклад, class="container").

DOM (Document Object Model) — це внутрішнє представлення HTML-сторінки у вигляді дерева.

Приклад:

<html>
  <head>
    <title>Page title</title>
  </head>
  <body class="container">
    <h1>Hello World!</h1>
  </body>
</html>

Браузер перетворює це на деревоподібну структуру, де кожен тег відповідає вузлу. Вузли впорядковані ієрархічно (батьківські й дочірні).

Важливо

Токени — це «сирі» дані (з тегів і текстових вузлів), які браузер бачить під час парсингу.
Вузли — це вже об’єкти в пам’яті, що утворюють DOM-дерево.

ЯК УТВОРЮЮТЬСЯ DOM І CSSOM

Коротке повторення про DOM

Ми вже зрозуміли, що браузер, читаючи HTML, створює дерево елементів (DOM). Це структура, що відображає ієрархію HTML-тегів, текстів і атрибутів.

Що таке CSSOM?

Паралельно з побудовою DOM, браузер аналізує ваші стилі, створюючи CSSOM (CSS Object Model):

Завантаження CSS
Код стилів може бути в <style> або в зовнішньому файлі, підключеному через <link>.
Парсинг CSS
Кожне правило (селектор і властивості) розкладається по частинах, визначається специфічність.

Приклад:

body { background-color: white; }
h1 { color: blue; }

Каскад
Якщо правила конфліктують, браузер порівнює специфічність (#id сильніший за .class) і бере переможця. Також звертає увагу на порядок оголошення та !important.
Побудова дерева стилів
Із цих правил утворюється CSSOM — структура, де для кожного селектора зберігається список властивостей, які буде застосовано.

Приклад:

body {
  font-family: sans-serif;
  background-color: white;
}
h1 {
  color: blue;
}
p {
  font-size: 12px;
}
span {
  font-weight: bold;
  display: none;
}

Браузер побудує дерево, де body, h1, p, span — це «вузли», а ключі на кшталт color, font-size чи display — це властивості.

display: none і виключення з Render Tree

display: none; виключає елемент із «Render Tree» — тобто візуально його немає на сторінці й він не займає місця. Але такий елемент усе одно існує у DOM і CSSOM.

Отже, коли буде створюватися фінальне дерево відображення (Render Tree), браузер «згадає», що елемент має display: none; і «викреслить» його зі списку видимих.

ЯК DOM І CSSOM ПОЄДНУЮТЬСЯ У RENDER TREE

Render Tree — це комбінація обох структур, з урахуванням видимих елементів. Тобто браузер:

Береться за DOM-дерево.
Дивиться на CSSOM, визначає стилі для кожного елемента.
Вирішує, чи елемент видимий (наприклад, display: none; виключається).
Створює нову структуру — Render Tree, де кожен вузол уже має конкретні стилі та форму.

РОЗРАХУНОК РОЗТАШУВАННЯ (LAYOUT)

Layout (іноді «reflow») — це момент, коли браузер визначає точні розміри й позиції кожного елемента. Уявіть, що HTML-елементи — це об’єкти в кімнаті, які потрібно розставити за правилами (ширина, висота, відступи, вирівнювання тощо).

Як працює Layout?

Починаємо з верхніх вузлів
Зазвичай це <html> або <body>. Браузер дивиться на їхні стилі, визначає розміри (наприклад, width: 100% або width: 300px).
Спускаємося до «дітей»
Для кожного дочірнього елемента у Render Tree виконується схожий розрахунок:
- Яка його ширина та висота?
- Які відступи (margin, padding, border)?
- Чи використовується position: absolute, display: flex, grid тощо?
Взаємозалежності
У деяких випадках (наприклад, flexbox) розміри дочірніх елементів упливають на остаточний розмір батька. Тоді браузер може робити кілька проходів.
Повне дерево Layout
У результаті браузер «знає», де саме розміщений кожен елемент, і наскільки він великий.

display: none
Такі елементи не включаються у Layout. Вони не впливають на розміщення решти.

Приклад:

<div style="width: 300px; padding: 10px; border: 5px solid black;">
  <p style="margin: 20px;">Hello World!</p>
</div>

Браузер бачить <div> із заданою шириною 300px, враховує padding (10 px) і border (5 px). Фактична «зовнішня» ширина може стати 330 px (300 + 10 + 10 + 5 + 5).
Елемент <p> всередині <div> має margin: 20px, тож браузер зсуває текст на 20 px від кожного краю <div> (залежно від напрямку).

ЩО ТАКЕ РАСТЕРИЗАЦІЯ (PAINTING)?

Растеризація — фінальний етап, коли браузер бере Render Tree з усіма стилями, позиціями й розмірами та починає «малювати» пікселі на екрані.

Підготовка шарів
У складних випадках (анімації, позиціонування) деякі елементи виносяться в окремі шари, щоб браузеру було легше динамічно їх оновлювати.
Створення списку інструкцій
Приклад:
- Намалювати фон для <body>.
- Зробити прямокутник <div> синього кольору.
- Відобразити текст білим шрифтом.
Передача інструкцій графічному рушієві
Спеціальний механізм браузера (графічний рушій) виконує все це й формує «готову картинку» — те, що ми бачимо на моніторі.

Приклад:

div {
  width: 200px;
  height: 100px;
  background-color: blue;
  border: 5px solid black;
}

На етапі растеризації:

Малюємо прямокутник 200 × 100 px.
Додаємо чорну рамку 5 px.
Заливаємо фон синім.

ВИСНОВОК

Рендеринг вебсторінки складається з кількох ключових кроків:

побудова DOM і CSSOM: з вашого HTML і CSS народжуються дві внутрішні структури;
render Tree: браузер «зливає» DOM і CSSOM, визначає, які елементи видимі та формує дерево для візуалізації;
layout: обчислюються точні розміри й позиції кожного видимого елемента;
растеризація (Painting): усе перетворюється на пікселі: графічний рушій виконує фінальний крок, щоб ви побачили результат.

Знаючи ці етапи, простіше розуміти, чому зміни у CSS або DOM можуть призводити до «перемальовування» (repaint) і «перерахунку» (reflow). Це, у свою чергу, допоможе писати більш продуктивний код, що швидше завантажується і краще працює на різних пристроях.

Якщо ви тільки починаєте знайомство з фронтендом, це — фундамент, на який спираються глибші концепції оптимізації, роботи з анімаціями, перехідними ефектами, Canvas, WebGL тощо. Впевнений, що надалі ці знання стануть вам у пригоді

Що таке render tree?

Рекомендуємо публікації по темі

Схожі матеріали