От строки адреса до пикселей: как браузер загружает веб-страницу

Ввод 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-обмена, в ходе которой обе стороны договариваются о ключах шифрования, а браузер проверяет сертификат сервера, чтобы убедиться, что он общается с настоящим сайтом. Только после этого браузер отправляет 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 добавляет функциональность до того, как браузер отрисует страницу.
• Каждая стадия срабатывает по своей узнаваемой причине, что делает эту модель полезным инструментом для отладки и учебного пособием.