Як працює браузер під час введення запиту та етапів рендерингу
Етапи роботи браузера при введенні запиту та рендерингу сторінки
Коли користувач вводить запит у адресний рядок браузера або натискає на посилання, відбувається кілька етапів, які призводять до рендеринг вмісту сторінки в браузері. Розглянемо процес детальніше:
Парсинг URL та розв'язання домену
- Парсинг URL: Браузер спочатку парсить введений URL, витягуючи протокол (наприклад,
http://абоhttps://), домен і шлях з нього. - Перевірка кешу: Браузер перевіряє свій кеш, щоб дізнатися, чи є вже відповідність між доменом і IP-адресою. Якщо відповідність знайдена, він негайно підключається до сервера.
- Запит до ОС: Якщо в кеші браузера немає запису, запит надсилається до операційної системи. ОС перевіряє файл hosts, який може містити статичні записи доменів і IP-адрес.
- Запит до DNS-сервера: Якщо у файлі hosts також немає запису, браузер надсилає запит до DNS-сервера для отримання відповідності домену. DNS-сервер повертає IP-адресу, яку браузер зберігає в кеші на певний час.
Встановлення TCP-з'єднання (триступеневий рукопашний)
Коли IP-адреса знайдена, браузер ініціює встановлення TCP-з'єднання з сервером. Процес включає триступеневий рукопашний (TCP handshake):
- SYN: Клієнт надсилає запит на встановлення з'єднання до сервера.
- SYN-ACK: Сервер відповідає підтвердженням на запит клієнта.
- ACK: Клієнт підтверджує отримання відповіді, з'єднання встановлено.
Ця переговорна процедура дозволяє встановити параметри з'єднання, такі як швидкість і розмір пакетів.
Надсилання HTTP-запиту
Коли з'єднання встановлено, браузер надсилає HTTP GET запит до сервера для отримання запитуваного ресурсу (зазвичай HTML-документу).
Отримання та парсинг HTML
Коли сервер надсилає HTML-документ у відповідь на запит, браузер починає парсити його та будувати DOM (Document Object Model) дерево — структуру, що представляє HTML-сторінку як об'єктну модель.
Завантаження та парсинг CSS і JS
- CSS: Під час парсингу HTML браузер починає завантажувати та парсити CSS-файли, створюючи CSSOM (CSS Object Model) — модель стилів, що містить інформацію про те, як стилі застосовуються до елементів сторінки.
- JS: Коли браузер натрапляє на тег
<script>, він повинен виконати JavaScript-код. Скрипти можуть блокувати подальший рендеринг сторінки, оскільки можуть змінювати DOM або CSSOM, тому JavaScript-код виконується синхронно перед продовженням рендерингу.
Важливо: Якщо скрипти додаються з атрибутами async або defer, вони не блокують рендеринг, оскільки виконуються після завантаження сторінки.
Формування дерева рендерингу
На основі DOM та CSSOM браузер будує дерево рендерингу — дерево рендерингу, що описує, як елементи будуть відображатися на екрані. Це дерево включає візуальні елементи (наприклад, блоки, зображення, текст), але не включає елементи, які не відображаються (наприклад, <head>, display: none).
Розміщення (позиціонування елементів)
На цьому етапі браузер обчислює позицію кожного елемента на сторінці:
- Браузер обчислює позиції елементів (наприклад, використовуючи моделі коробок) та їх розміри (ширина, висота).
- Полі, рамки, відступи, а також позиціонування елементів на сторінці обчислюються.
Етап розміщення необхідний для точного визначення того, де і як елементи повинні бути розміщені на екрані.
Рендеринг (малювання)
На етапі малювання браузер "малює" кожен елемент на екрані на основі даних з дерева рендерингу. Це включає рендеринг кольорів, текстур, шрифтів, рамок та інших візуальних властивостей.
- Кожен елемент "малюється", враховуючи свої стилі, а текст може бути намальований як окремі рядки або блоки.
Композиція (складання шарів)
Коли елементи сторінки намальовані, браузер переходить до фінального етапу — композиції. Тут відбувається складання шарів:
- Браузер групує елементи в шари для ефективної обробки. Ці шари можуть бути відрендерені незалежно, що прискорює рендеринг.
- Важливі стилі, такі як
transformабоopacity, можуть бути використані для переміщення елементів на GPU для подальшої обробки, щоб розвантажити CPU. - На цьому етапі браузер може оптимізувати рендеринг, надсилаючи шари на графічну карту для рендерингу.
Рекомендація:
Щоб покращити продуктивність рендерингу, мінімізуйте блокуючі запити, використовуйте асинхронне завантаження скриптів та оптимізуйте CSS.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.