Ввод URL: Пользователь вводит URL в адресную строку браузера.
Парсинг URL: Браузер парсит URL, извлекая протокол, доменное имя, порт и путь.
Поиск IP-адреса: Браузер проверяет свой кеш DNS, кеш операционной системы и кеш маршрутизатора на наличие сохраненного IP-адреса, соответствующего доменному имени. Если его нет, отправляется запрос к DNS-серверу.
DNS-запрос: Браузер отправляет рекурсивный запрос к локальному DNS-серверу, который может обратиться к корневым, TLD и авторитативным DNS-серверам для получения IP-адреса.
Установление TCP-соединения: Браузер устанавливает TCP-соединение с сервером, используя полученный IP-адрес и порт (по умолчанию 80 для HTTP, 443 для HTTPS). Происходит "трехстороннее рукопожатие" (three-way handshake).
SYN (Client to Server)
SYN-ACK (Server to Client)
ACK (Client to Server)
Отправка HTTP-запроса: Браузер отправляет HTTP-запрос (например, GET /path/to/resource HTTP/1.1) серверу.
Обработка запроса сервером: Сервер принимает запрос, обрабатывает его (например, выполняет код приложения) и формирует HTTP-ответ.
Отправка HTTP-ответа: Сервер отправляет HTTP-ответ браузеру. Ответ включает статус-код (например, 200 OK, 404 Not Found), заголовки и тело ответа (HTML, CSS, JS и т.д.).
Получение и парсинг HTML: Браузер получает HTML-код и начинает парсить его, создавая DOM-дерево (Document Object Model).
Запросы на дополнительные ресурсы: При парсинге HTML браузер обнаруживает ссылки на дополнительные ресурсы (CSS, JavaScript, изображения, шрифты) и отправляет отдельные HTTP-запросы для их получения.
Парсинг CSS и создание CSSOM: Браузер парсит CSS-файлы и создает CSSOM-дерево (CSS Object Model).
Создание Render Tree: Браузер объединяет DOM и CSSOM, создавая Render Tree, который содержит только видимые элементы и их стили.
Layout (Reflow): Браузер вычисляет точные размеры и положение каждого элемента на странице.
Painting (Repaint): Браузер отрисовывает пиксели на экране на основе Render Tree и Layout.
Выполнение JavaScript: Браузер парсит и выполняет JavaScript-код. JavaScript может изменять DOM и CSSOM, что может вызвать повторный Reflow и Repaint.
Завершение: Страница полностью загружена и готова для взаимодействия с пользователем.