Что происходит при вводе адреса: урок по Сети и HTTP

Классический вопрос: «Что происходит после того, как ввёл https://shop.ru и нажал Enter?». Ответ проверяет, видишь ли ты всю цепочку целиком. Идём по шагам.

1. Разбор ввода

Браузер решает, URL это или поисковый запрос. Если схемы нет, подставит https:// (современные браузеры по умолчанию пробуют HTTPS). Если домен в HSTS-списке (заголовок Strict-Transport-Security получен раньше или домен в preload-списке браузера), запрос по http:// даже не уйдёт: браузер сразу пойдёт по HTTPS.

Ещё до сети браузер может отдать страницу из bfcache (при навигации «назад») или проверить HTTP-кеш и Service Worker.

2. DNS

Нужен IP-адрес. Цепочка кешей: кеш браузера → кеш ОС (и hosts) → рекурсивный резолвер (провайдер, 1.1.1.1, 8.8.8.8). Если у резолвера нет ответа, он спрашивает:

корневой сервер: «кто отвечает за .ru?»
сервер зоны .ru: «кто отвечает за shop.ru?»
авторитетный сервер shop.ru: «какой A/AAAA-адрес?»

Ответ кешируется на время TTL. DNS-запросы обычно идут по UDP на порт 53; бывают зашифрованные DoH (DNS over HTTPS) и DoT.

3. Соединение

TCP: тройное рукопожатие SYN → SYN-ACK → ACK, 1 RTT.
TLS 1.3: ClientHello → ServerHello + сертификат → Finished, ещё 1 RTT. Браузер проверяет сертификат: цепочка до доверенного корня, имя домена, срок действия. Через ALPN стороны договариваются о протоколе (h2 или http/1.1).
HTTP/3 работает поверх QUIC (UDP): транспорт и TLS объединены, рукопожатие 1 RTT, а при повторном соединении возможно 0-RTT. Браузер узнаёт о поддержке из заголовка Alt-Svc или DNS-записи HTTPS.

4. HTTP-запрос и ответ

GET / HTTP/2
Host: shop.ru
Accept: text/html
Cookie: sid=...

По пути запрос может пройти CDN, балансировщик, reverse proxy (nginx), и только потом приложение. Ответ может быть редиректом (301/302 + Location), тогда цикл повторяется. Если всё хорошо: 200 OK, Content-Type: text/html, тело часто сжато (Content-Encoding: br или gzip).

5. Парсинг и построение DOM

Браузер читает HTML потоком и строит DOM. Встретив ресурсы, действует по-разному:

<link rel="stylesheet"> грузится параллельно, но блокирует рендер: без CSSOM страницу не нарисуют.
<script> без атрибутов блокирует парсинг: HTML ждёт загрузки и выполнения скрипта.
<script defer> грузится параллельно, выполняется после разбора HTML, по порядку.
<script async> грузится параллельно, выполняется сразу по готовности, порядок не гарантирован.
type="module" по умолчанию ведёт себя как defer.

Preload scanner заранее находит ресурсы ниже по документу и начинает их грузить, даже пока парсер стоит.

6. CSSOM, render tree, layout, paint, composite

Из CSS строится CSSOM.
DOM + CSSOM = render tree (только видимые узлы: display: none туда не попадает).
Layout: расчёт размеров и позиций.
Paint: отрисовка пикселей по слоям.
Composite: слои собираются в кадр, часто на GPU.

Событие DOMContentLoaded срабатывает, когда HTML разобран и defer-скрипты выполнены. load ждёт все ресурсы, включая картинки.

7. Дальше

JS навешивает обработчики, фреймворк гидрирует разметку, подгружаются ленивые чанки и картинки. Изменение геометрии потом вызывает reflow (layout), изменение только цвета repaint, а transform и opacity можно менять без них, на этапе composite.

Как ускорить каждый этап

DNS и соединение: <link rel="preconnect">, CDN ближе к пользователю, HTTP/3.
Ответ: кеширование, сжатие Brotli, 103 Early Hints.
Рендер: критический CSS, defer для скриптов, меньше JS, размеры у картинок.

Что спросят на собесе

Расскажи по шагам от ввода адреса до отрисовки.
Как работает DNS-резолвинг?
Сколько RTT занимает установка HTTPS-соединения на TCP+TLS 1.3 и на HTTP/3?
Чем отличаются async и defer, что блокирует рендер?
Что такое critical rendering path?

Что происходит, когда вводишь адрес