Від адресної стрічки до пікселів: як браузер завантажує веб-сторінку

Введення example.com та натискання Enter здається миттєвим процесом, але перед тим, як щось з’явиться на екрані, відбувається кілька окремих кроків. Коли ви тільки починаєте працювати з розробкою веб-сайтів, такі терміни, як DNS, сервер, HTML, CSS та JavaScript, можуть здаватися окремими темами. У цій статті вони поєднуються в одну послідовність, щоб у вас була уявна модель, до якої можна буде додавати наступні теми — від API до продуктивності відображення.

Цей процес складається з чотирьох етапів: пошук сайту, запит до нього на отримання контенту, отримання цього контенту та перетворення його на видиму сторінку.

Етап 1: Визначення місця розташування веб-сайту

Люди ідентифікують веб-сайти за назвою. Такі назви легко запам’ятати:

example.com
google.com
youtube.com

Однак комп’ютери в мережі звертаються один до одного за допомогою IP-адрес — числових ідентифікаторів на кшталт 203.0.113.10 для IPv4 або довших шістнадцяткових форм для IPv6. Перш ніж браузер зможе встановити зв’язок із сайтом, йому потрібно перетворити назву на адресу. Саме цим займається DNS — система імен доменів.

Гарним прикладом для уявлення DNS є список контактів у вашому телефоні. Ви зберігаєте та шукаєте людей за ім’ям, а телефон знаходить для вас їхній номер. Вам ніколи не потрібно запам’ятовувати цифри. DNS робить те саме для Інтернету: ви вводите ім’я домену, а DNS надає адресу комп’ютера, який його обслуговує.

На практиці пошук відбувається поетапно та активно кешується. Браузер спочатку перевіряє власний кеш, потім кеш операційної системи, і лише після цього звертається до резолвера DNS, який зазвичай працює у вашого інтернет-провайдера або через публічний DNS-сервіс. Якщо резолвер ще не знає відповіді, він працює через ієрархію DNS, поки не знайде сервери, відповідальні за цю доменну адресу. Завдяки кешуванню сайт, який ви нещодавно відвідали, зазвичай резолюється майже миттєво.

Етап 2: Надсилання запиту

Маючи IP-адресу, браузер може зв’язатися з сервером сайту – комп’ютером, завданням якого є зберігати, генерувати та надавати файли та дані, необхідні веб-сайту.

Перш ніж будь-який веб-контент буде переданий, браузер встановлює з’єднання з цим сервером. Для сучасного сайту за протоколом https:// це також включає процедуру TLS-handshake, під час якої обидві сторони домовляються щодо ключів шифрування, а браузер перевіряє сертифікат сервера, щоб переконатися, що він спілкується з справжнім сайтом. Лише після цього браузер надсилає HTTP-запит.

По дорозі запит проходить через багато мереж та пристроїв, таких як ваш роутер, обладнання вашого провайдера та різні проміжні роутери, перш ніж досягти сервера. У своїй суті запит означає: «Будь ласка, надішліть мені те, що потрібно для відображення цієї сторінки». Він також містить деталі, такі як точний шлях до файлу, підтримувані формати браузера та будь-які кукі для цього сайту.

Етап 3: Отримання відповіді

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

• HTML-документи
• CSS-шаблони стилів
• JavaScript-файли
• Зображення
• інші дані, такі як шрифти чи JSON від API

Ресторан полегшує запам’ятовування цього процесу:

• Браузер — це клієнт.
• Запит — це замовлення.
• Сервер — це кухня.
• Відповідь — це страва.

Ви оформлюєте замовлення, кухня його отримує, готує страву та відправляє її. Інтернет працює за тим самим принципом: браузер запитує, сервер виконує роботу, а результат повертається назад. Кожна відповідь також містить код статусу, наприклад 200 для успіху або 404, коли сторінка не існує, що вказує браузеру, як обробити отримане.

Етап 4: Перетворення файлів у сторінку

Наявність файлів — це не те саме, що відображення сторінки. Браузер все одно має їх інтерпретувати та поєднувати в те, що ви бачите, причому кожна з трьох основних мов вебу виконує окрему функцію.

HTML забезпечує структуру

HTML описує те, що знаходиться на сторінці, та спосіб її організації: заголовки, абзаци, кнопки, зображення, посилання тощо. Це скелет сторінки. Браузер парсить його у DOM (Document Object Model) — дерево елементів, на якому ґрунтується весь подальший процес обробки.

CSS керує зовнішнім виглядом

CSS визначає, як виглядає ця структура: кольори, шрифти, відступи, макет та розміри. Якщо HTML — це скелет, то CSS — це все те, що надає йому візуальної форми. Браузер парсить таблиці стилів у власну структуру та прив’язує кожне правило до відповідних елементів.

JavaScript додає функціональність

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

Об’єднання елементів

З поєднанням структури та стилів браузер визначає, де має розташовуватися кожен елемент (розмітка), а потім відображає результат (заповнення екрану). За замовчуванням простий тег <script> зупиняє парсинг HTML під час завантаження та виконання скрипту, що є однією з причин, чому рекомендації щодо продуктивності часто пропонують використовувати атрибути defer чи async.

Усі етапи у порядку

Послідовність етапів:

1. Ви вводите адресу веб-сайту.
2. DNS перетворює назву на IP-адресу.
3. Браузер під’єднується до сервера та надсилає запит.
4. Сервер отримує та обробляє запит.
5. Сервер надсилає відповідь.
6. Браузер отримує HTML та запитує CSS, JavaScript, зображення та інші дані, на які він посилається.
7. Браузер парсить та об’єднує ці ресурси.

Готова сторінка з’являється на вашому екрані.

При швидкому з’єднанні більша частина цих процесів відбувається за дрібку секунди, тому здається, що натискання клавіші Enter просто змушує сторінку з’явитися.

Чому ця модель варта того, щоб її мати

Знання цієї послідовності поєднує концепції, які зазвичай викладають окремо: браузери, DNS, сервери, HTML, CSS та JavaScript. Вона також надає вам місце для засвоєння нових знань. Коли ви пізніше дізнаєтесь про API, ви будете розуміти їх як додаткові обміни запитами та відповідями. Коли будете вивчати роботу бекенду, ви зрозумієте, що вона відбувається на серверній стороні етапу 3. Коли будете досліджувати продуктивність фронтенду, ви зрозумієте, що це переважно про прискорення етапів 3 та 4.

Це також допомагає під час виправлення помилок. Помилка „Сайт не знайдено“ вказує на першу стадію, помилка таймауту або з’єднання — на другу, статус 500 — на сервер на третій, а сторінка, яка завантажується, але виглядає пошкодженою, — на проблеми з CSS або JavaScript на четвертій.

Ключові висновки

• DNS перетворює зрозумілі для людини назви на IP-адреси, використовуючи кешування на кількох рівнях.
• Браузер відкриває з’єднання, захищене TLS для HTTPS, та надсилає HTTP-запит.
• Сервер відповідає HTML, який у свою чергу посилається на CSS, JavaScript, зображення та інші ресурси.
• HTML створює DOM для структури, CSS форматує її, а JavaScript додає функціонал перед тим, як браузер розміщує та відображає сторінку.
• Кожна стадія провалюється по-своєму, що робить цю модель практичним інструментом для виправлення помилок та допомогою у навчанні.