Процесс загрузки веб-страницы в браузере

Загрузка веб-страницы начинается с обращения браузера к DNS-системе для определения IP-адреса веб-сервера, обслуживающего запрашиваемый ресурс, с последующей установкой соединения для создания канала обмена данными: в итоге — скачивается содержимое HTML-документа для дальнейшей обработки и вывода на экран.

Основные этапы загрузки веб-страницы:

Инициализация загрузки веб-документа

Начало загрузки страницы. Триггеры запуска:

  • ввод сетевого адреса в адресную строку;
  • переход по ссылке;
  • обновление страницы (F5);
  • переход по закладке;
  • переход из истории браузера;
  • автоматическое перенаправление;
  • выполнение JavaScript-кода;
  • открытие ссылки внешним приложением.

Разрешение доменного имени и получение IP-адреса (DNS)

Браузер обращается к DNS-системе за получением IP-адреса веб-сервера (host), обслуживающего запрашиваемый ресурс.

веб-сервер (обслуживающий запрашиваемый ресурс) — сетевой узел, принимающий HTTP-запросы и возвращающий HTTP-ответ с результатом обработки запроса.

DNS-запрос: получение IP-адреса сайта
  • Терминологически условно: Получение IP-адреса сайта по его доменному имени через DNS-систему.
  • Запрос к DNS-серверу выполняется автоматически в процессе инициализации просмотра веб-страницы;
  • Адрес DNS-сервера считывается операционной системой из сетевых настроек устройства пользователя, где он прописывается автоматически провайдером по протоколу DHCP при подключении к сети или вносится пользователем вручную, в административном порядке.

У сайта, как у интернет-сущности, нет собственного IP-адреса, но он логически связан с IP-адресом сервера, обслуживающего данный домен.

Логика соответствия «домен сайта —> IP-адрес обслуживающего устройства (host)» представляет собой статическую административную запись в базе программы DNS-сервер.

  • host — устройство, подключенное к сети (физический сервер, виртуальная машина), участвующее в обмене данными и имеющее уникальный IP-адрес в пределах своего адресного пространства.
  • Уникальность IP-адреса — монопольное закрепление цифрового адреса за конкретным сетевым интерфейсом в пределах определенного адресного пространства (сети/подсети) во избежание конфликтов маршрутизации.
DNS-сервер (Domain Name System)
  • DNS-сервер — это программный сервис DNS-службы. Самые известные DNS-программы, реализующие серверную службу DNS-системы: BIND 9, Unbound, CoreDNS;
  • Цель DNS-системы — выдать IP-адрес, сопоставленный в базе данных с текстовым запросом (доменным именем) из таблицы соответствий (DNS-записей);
  • Служба DNS — это «телефонная книга», адресный справочник интернета, база данных строк текстового соответствия. В сценарии «Загрузка веб-страницы в браузере» полномочия DNS ограничиваются чтением табличной административной записи: доменное имя —> IP-адрес(а);
DNS-ответ: получение IP-адреса сайта
  • В DNS-ответе браузер получает искомый IP-адрес (или список адресов), записанный в таблице соответствия DNS-службы для данного доменного имени;
  • Служба DNS не знает, что такое сетевой узел. Но данные, которыми она оперирует, по законам сетевой архитектуры всегда адресуются к сетевым узлам.

Заключение: Опираясь на вышесказанное, смело утверждаем, что в результате обращения к службе DNS браузер получает IP-адрес (или список адресов) для установления сетевого соединения и дальнейшей работы по загрузке веб-страницы.

Установление сетевого соединения с веб-сервером

... DNS возвращает IP-адрес, соответствующий доменному имени, или список IP-адресов, связанных с ним. Браузер выбирает один из них и устанавливает соединение, при необходимости переходя к следующему.

Создается канал обмена данными: полнодуплексное логическое соединение для отправки прикладного HTTP-запроса, приема исходного HTML-кода запрошенного документа и последующего скачивания дополнительных ресурсов веб-страницы (стилей, скриптов, медиафайлов) в рамках единой сетевой сессии.

Основные этапы установления соединения:

Инициализация транспортного соединения (рукопожатие)
Взаимный обмен служебными пакетами браузера и веб-сервера для подтверждения доступности сторон и согласования правил передачи данных;
Защита канала связи (TLS/SSL-согласование)
Проверка подлинности цифрового сертификата веб-сервера и генерация ключей шифрования при использовании протокола HTTPS;
Переход к сессии обмена
Перевод созданного логического канала в режим готовности к приему и отправке HTTP-запросов.

HTTP-запрос: Отправка исходящего

Отправка HTTP-запроса
Браузер формирует и отправляет на веб-сервер HTTP-запрос с базовыми ключевыми элементами:
  • метод (GET, POST и др.);
  • имя хоста;
  • путь к запрашиваемому ресурсу.
Сопутствующая структура запроса включает:
  • заголовки (Headers);
  • данные авторизации и cookies;
  • дополнительные параметры (тело запроса при методе POST).

HTTP-ответ: Обработка запроса сервером

Веб-сервер принимает запрос, определяет целевой ресурс, формирует контент и возвращает браузеру структурированный HTTP-ответ:

Маршрутизация запроса
Сопоставление заголовков и пути запроса с конфигурацией веб-сервера для определения логики обработки;
Генерация ответа
Чтение статических файлов с диска или исполнение серверного скрипта (бэкенда) для сборки динамического HTML-кода;
Отправка HTTP-ответа
Передача в канал связи стартовой строки со статусом (например, 200 OK, 404 Not Found), служебных заголовков и тела ответа (текста веб-страницы).

Обработка HTML-документа

Получив исходную HTML-разметку документа, браузер немедленно запускает его обработку:

Выполняется последовательный разбор полученного HTML-кода для построения внутренней структуры документа (DOM) и инициируется загрузка связанных внешних ресурсов — начинается рендеринг страницы.

Рендеринг — сквозной процесс преобразования кода в интерактивное графическое изображение:

  • синтаксический анализ (парсинг) HTML-разметки, стилей и скриптов (HTML, CSS, JavaScript);
  • расчет геометрии элементов;
  • послойная отрисовка в памяти (растеризация);
  • финальный вывод пикселей на экран пользователя.

В процессе рендеринга, загружаются внешние ресурсы, указанные в HTML-документе:

  • CSS-файлы;
  • JavaScript-файлы;
  • изображения;
  • шрифты;
  • медиафайлы.

Для загрузки дополнительных ресурсов браузер отправляет на веб-сервер отдельные запросы: веб-сервер находит запрошенные файлы и передает их обратно, упаковывая в структурированные HTTP-ответы.

Финал успешной загрузки — страница готова

Завершение загрузки

Финал успешной загрузки — окончание приема данных при условии полной сборки ресурсов веб-страницы. Рендеринг подходит к завершению.

Активный сетевой обмен данными прекращается, ресурсы укомплектованы, браузер дорисовывает на экране последние штрихи перед переходом в Idle (режим ожидания, простоя или покоя).

Страница готова

Рендеринг и визуализация запрошенного документа финализируются, основной поток браузера (Main Thread) переходит в состояние ожидания внешних событий: обозреватель переключается в режим покоя.

Website

Windows

Записки алкоголика