Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що відбувається під час парсингу HTML браузером?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Парсинг HTML** - це процес, під час якого браузер читає HTML-код і перетворює його на зрозумілу машині структуру даних: **DOM-дерево (Document Object Model)**. **Ключове:** під час парсингу браузер читає код, розбирає його за змістом, будує модель сторінки (DOM) і готує все, щоб намалювати сторінку на екрані.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Парсинг HTML** - це процес, при якому браузер **читає HTML-код і перетворює його на структуру даних**, зрозумілу машині: на **DOM-дерево (Document Object Model)**. Простіше кажучи, браузер **перекладає текст HTML у візуальну структуру**, з якою потім може працювати і він сам, і JavaScript. --- ### Крок за кроком: що робить браузер під час парсингу HTML #### 1. **Завантаження файлу** Браузер отримує HTML-документ (з сервера або локально) і починає читати його **порядково, згори вниз**. Він не чекає, поки весь файл завантажиться: парсинг і завантаження відбуваються **паралельно**. --- #### 2. **Лексичний аналіз (токенізація)** HTML - це просто текст, і браузеру потрібно зрозуміти, де **теги**, а де **вміст**. Він розбиває текст на **токени**: маленькі смислові одиниці. Наприклад, код: ```html <p>Привіт, світе!</p> ``` розпадається на токени: ```javascript Тег відкриття: <p> Текст: "Привіт, світе!" Тег закриття: </p> ``` --- #### 3. **Синтаксичний аналіз** Після токенізації браузер перевіряє структуру документа: вкладеність, правильність закриття тегів, відповідність стандартам. Якщо знаходить помилку (наприклад, пропущено `</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)** і готує все, щоб **намалювати сторінку на екрані**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.