0Pricing
Frontend Academy · Урок

DNS и HTTP в браузерах: жизненный цикл запроса

Проследите путь URL от адресной строки через разрешение DNS, TCP-соединение и HTTP-запрос до ответа сервера, возвращаемого браузеру.

«DNS и HTTP в браузерах: жизненный цикл запроса» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что происходит при вводе URL?

Каждый раз, когда Вы посещаете веб-сайт, браузер запускает точную последовательность действий. Понимание этой последовательности делает Вас более эффективным разработчиком: Вы знаете, где могут возникнуть проблемы и как ускорить их устранение.

Шаг 1 — разрешение DNS

DNS (Domain Name System) — это телефонный справочник интернета. Браузер спрашивает у DNS-распознавателя: «Какой IP-адрес соответствует example.com?». Распознаватель проверяет кэши и при необходимости обращается к авторитетным серверам имён.

# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NS

Шаг 2 — рукопожатие TCP

Когда IP-адрес известен, браузер устанавливает соединение TCP с помощью трёхэтапного рукопожатия: SYN → SYN-ACK → ACK. Для HTTPS после этого выполняется рукопожатие TLS, в ходе которого согласовывается шифрование.

Шаг 3 — HTTP-запрос

Браузер отправляет HTTP-запрос через соединение TCP. Он включает метод (GET, POST…), путь (/index.html), версию HTTP и такие заголовки, как Host и Accept.

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0

Шаг 4 — HTTP-ответ

Сервер обрабатывает запрос и отправляет ответ: код состояния (200 OK, 404 Не найдено…), заголовки ответа (Content-Type, Cache-Control) и тело (HTML, JSON, байты изображения).

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

HTTP/1.1 против HTTP/2 и HTTP/3

HTTP/1.1 отправляет по одному запросу через каждое соединение. HTTP/2 мультиплексирует множество запросов через одно соединение. HTTP/3 использует QUIC на основе UDP для уменьшения задержки, особенно в мобильных сетях с потерями пакетов.

Коды состояния, которые необходимо знать

2xx = успешное выполнение (200 OK, 201 Создано). 3xx = перенаправление (301 Перемещено навсегда, 304 Не изменено). 4xx = ошибка клиента (400, 401, 403, 404). 5xx = ошибка сервера (500, 502, 503).

HTTPS и TLS

HTTPS заключает HTTP внутри TLS (Transport Layer Security). TLS обеспечивает шифрование, чтобы трафик нельзя было прочитать; аутентификацию с помощью сертификатов, подтверждающую, что Вы действительно общаетесь с example.com; и целостность, защищающую данные от подмены.

Кэширование: ускоряем повторные посещения

Ответы могут содержать Cache-Control: max-age=86400, чтобы браузер использовал сохранённую копию в течение суток. Заголовки ETag и Last-Modified позволяют браузеру проверить, не устарела ли сохранённая версия.

Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMT

Файлы cookie и сеансы

Серверы устанавливают файлы cookie с помощью заголовка Set-Cookie. Браузер автоматически отправляет их обратно с каждым запросом к тому же домену. Обычно сеанс представляет собой файл cookie с идентификатором сеанса, который сервер связывает с данными пользователя.

CDN — сети доставки контента

CDN хранит копии ресурсов в центрах обработки данных по всему миру. Пользователи загружают их с ближайшего узла, что уменьшает задержку. Cloudflare, Fastly и AWS CloudFront — популярные CDN, которые используют большинство крупных веб-сайтов.

Быстрая проверка

Какой метод HTTP используется, чтобы запросить веб-страницу у сервера?

Итоги: полный жизненный цикл запроса

Введён URL → DNS преобразует домен в IP → установлено соединение TCP (и TLS) → браузер отправляет HTTP-запрос → сервер отвечает кодом состояния, заголовками и телом → браузер отображает ответ. Каждый шаг можно наблюдать на панели Network в DevTools.

Часто задаваемые вопросы

Урок «DNS и HTTP в браузерах: жизненный цикл запроса» бесплатный?

Да — полный текст урока «DNS и HTTP в браузерах: жизненный цикл запроса» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «DNS и HTTP в браузерах: жизненный цикл запроса»?

Проследите путь URL от адресной строки через разрешение DNS, TCP-соединение и HTTP-запрос до ответа сервера, возвращаемого браузеру. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «DNS и HTTP в браузерах: жизненный цикл запроса»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. DNS и HTTP в браузерах: жизненный цикл запроса
  2. HTML, CSS и JavaScript: задачи каждого слоя
  3. Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование
  4. Инструменты разработчика: открытие и использование DevTools
← Назад к Frontend Academy