Що відбувається під час парсингу HTML браузером?

HTMLJunior~2 хв читання

Парсинг HTML - це процес, при якому браузер читає HTML-код і перетворює його на структуру даних, зрозумілу машині: на DOM-дерево (Document Object Model).

Простіше кажучи, браузер перекладає текст HTML у візуальну структуру, з якою потім може працювати і він сам, і JavaScript.

Крок за кроком: що робить браузер під час парсингу HTML

1. Завантаження файлу

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

2. Лексичний аналіз (токенізація)

HTML - це просто текст, і браузеру потрібно зрозуміти, де теги, а де вміст. Він розбиває текст на токени: маленькі смислові одиниці.

Наприклад, код:

html

<p>Привіт, світе!</p>

розпадається на токени:

javascript

Тег відкриття: <p>
Текст: "Привіт, світе!"
Тег закриття: </p>

Після токенізації браузер перевіряє структуру документа: вкладеність, правильність закриття тегів, відповідність стандартам. Якщо знаходить помилку (наприклад, пропущено </div>), він намагається здогадатися, що мав на увазі розробник. HTML - «поблажлива» мова, тому сторінка майже завжди відобразиться, навіть якщо код неідеальний.

4. Побудова DOM-дерева

З отриманих токенів браузер створює DOM (Document Object Model): внутрішнє дерево елементів. Кожен тег перетворюється на вузол (node), а вкладені елементи утворюють ієрархію.

Приклад:

html

<body>
  <h1>Заголовок</h1>
  <p>Текст</p>
</body>

Перетворюється на дерево:

javascript

body
 ├── h1
 │    └── "Заголовок"
 └── p
      └── "Текст"

5. Виявлення зовнішніх ресурсів

Коли браузер зустрічає теги на кшталт:

html

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<img src="photo.jpg">

він надсилає додаткові запити до сервера, щоб завантажити CSS, скрипти й зображення. Деякі з них (особливо <script>) можуть призупиняти парсинг, доки не виконаються.

6. Передача DOM на етап рендерингу

Коли DOM готовий (або частково готовий), браузер передає його далі: на етап візуалізації (rendering), де вже застосовується CSS, обчислюється розташування елементів і малюється сторінка.

Підсумок:

Етап	Що робить браузер
1. Завантаження	Отримує HTML-файл
2. Токенізація	Розбиває текст на теги і вміст
3. Синтаксичний аналіз	Перевіряє структуру і вкладеність
4. Побудова DOM	Створює дерево елементів
5. Завантаження ресурсів	Підвантажує CSS, JS, зображення
6. Рендеринг	Передає результат на екран

Простими словами: Під час парсингу HTML браузер читає код, розбирає його за змістом, будує модель сторінки (DOM) і готує все, щоб намалювати сторінку на екрані.

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

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

Premium

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