Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить браузер під час завантаження HTML-файлу?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Коли **браузер** завантажує HTML-файл, він виконує кілька чітких кроків: отримує файл, парсить його в DOM, завантажує зовнішні ресурси, застосовує CSS, рендерить сторінку і запускає JavaScript. **Ключове:** браузер читає код, будує модель, оформляє її за стилями і малює на екрані, а потім за допомогою JavaScript сторінка починає жити й реагувати.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняКоли браузер завантажує HTML-файл, він виконує **кілька чітких кроків**, перетворюючи код на готову візуальну сторінку, яку ми бачимо на екрані. Ось як це відбувається: --- ### 1. **Отримання і читання файлу** Браузер отримує HTML-документ: - або з сервера за адресою (наприклад, `https://example.com`), - або з твого комп'ютера (якщо ти відкрив файл `.html` вручну). Після цього він починає **читати файл згори вниз**, **порядково**, як книгу. --- ### 2. **Аналіз структури (парсинг HTML)** Коли браузер бачить HTML-теги (`<html>`, `<head>`, `<body>` тощо), він **будує внутрішню модель документа**, яка називається **DOM-деревом (Document Object Model)**. Приклад: ```html <body> <h1>Привіт!</h1> <p>Це мій сайт.</p> </body> ``` Браузер перетворює це на структуру: ```javascript body ├── h1 └── p ``` DOM - це те, з чим потім працює JavaScript. --- ### 3. **Завантаження зовнішніх ресурсів** Поки HTML читається, браузер бачить посилання на інші файли: - стилі (`<link rel="stylesheet" href="style.css">`), - скрипти (`<script src="script.js"></script>`), - зображення (`<img src="photo.jpg">`). Він **надсилає додаткові запити** до сервера, щоб їх завантажити. --- ### 4. **Застосування CSS (формування рендера)** Коли стилі завантажені, браузер будує **CSSOM (CSS Object Model)**: дерево всіх правил оформлення. Потім поєднує його з DOM, і створюється **Render Tree**: модель, у якій кожен елемент знає: - свій колір, - розмір, - розташування. На цьому етапі браузер уже "розуміє", *як* сторінка має виглядати. --- ### 5. **Рендеринг і відображення** Далі браузер: 1. **Обчислює геометрію** елементів (етап layout). 2. **Малює** пікселі на екрані (етап paint). 3. Якщо щось змінюється (наприклад, анімація або дія користувача), **перемальовує** потрібні ділянки. --- ### 6. **Виконання JavaScript** Коли HTML-структура завантажена, браузер запускає **скрипти**: - вони можуть змінити DOM (додати, видалити, приховати елементи), - реагувати на дії користувача, - оновлювати дані без перезавантаження сторінки. --- ### Підсумок: | Етап | Що робить браузер | |---|---| | 1. Завантаження | Отримує HTML-файл | | 2. Парсинг | Перетворює HTML на DOM | | 3. Завантаження ресурсів | Підвантажує CSS, JS, картинки | | 4. Застосування стилів | Формує візуальне представлення | | 5. Рендеринг | Відображає сторінку | | 6. JavaScript | Додає інтерактивність | --- **Простими словами:** Браузер **читає код**, **будує модель**, **оформляє її за стилями** і **малює на екрані**. А потім, за допомогою JavaScript, сторінка починає **жити й реагувати**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.