Куда уходит первый запрос при заходе на сайт в браузере

Что проверяют

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

Как отвечать

Идите по шагам и отмечайте, что можно пропустить:

• до сети: браузер решает, URL это или поисковый запрос. Если домен в списке HSTS, http меняется на https без запроса, в DevTools это 307 Internal Redirect. Зарегистрированный Service Worker перехватывает навигацию и может ответить из кеша;
• DNS: кеш браузера, кеш ОС и файл hosts, затем резолвер провайдера или DoH. Рекурсивный резолвер опрашивает корневые серверы, зону .com и авторитетный сервер домена. Запись типа HTTPS может сразу сообщить, что сервер умеет HTTP/3;
• соединение: TCP-рукопожатие и TLS 1.3 (ещё один круг, при возобновлении сессии возможен 0-RTT) или QUIC для HTTP/3 поверх UDP, где транспорт и шифрование договариваются за один круг;
• запрос: GET за документом с Sec-Fetch-Mode: navigate, куками и Accept. Уходит он чаще всего не на сервер приложения, а на ближайший узел CDN или балансировщик: IP из DNS принадлежит им;
• ответ: бывает редиректом (301 на www или https), это ещё один круг. 103 Early Hints позволяет браузеру грузить CSS, пока сервер собирает страницу;
• рендер: HTML разбирается потоково, preload scanner заранее находит ресурсы, CSS блокирует отрисовку, скрипт без defer или async блокирует парсер.

Что делает фронтенд: preconnect и dns-prefetch к сторонним доменам, меньше редиректов, критический CSS, defer у скриптов. Разбивку времени смотрят во вкладке Network в Timing: DNS Lookup, Initial connection, SSL, Waiting for server response.

Где спотыкаются

Начинают сразу с «запроса к DNS-серверу», пропуская кеши, HSTS и Service Worker.

Забывают про TLS, будто сайты открываются по голому HTTP, и не знают, чем HTTP/3 отличается транспортом.

Говорят, что браузер сначала загружает все ресурсы, а потом рисует страницу. Отрисовка идёт прогрессивно, и поэтому важен порядок подключения CSS и скриптов.