Главная · Веб-разработка
Веб-разработка

Что происходит между нажатием Enter и отображением сайта: полный разбор цепочки запроса

3DH.su3DH.su 7 июня 2026 5 мин чтения
Что происходит между нажатием Enter и отображением сайта: полный разбор цепочки запроса

Многие начинающие разработчики (и даже некоторые опытные) привыкли воспринимать процесс загрузки страницы как магический черный ящик: ввел URL $\rightarrow$ получил страницу. Но на деле между нажатием клавиши Enter и моментом, когда вы увидели заголовок сайта, разворачивается настоящая высокотехнологичная драма с участием нескольких сетевых протоколов, серверов и сложного механизма рендеринга.

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

Часть 1: Сетевой путь. Как браузер находит сервер?

Прежде чем передать какой-либо контент, браузеру нужно понять, «где физически находится этот сайт». Компьютеры не понимают слов google.com или habr.com, им нужны IP-адреса (например, 142.250.186.46).

1. DNS-резолвинг (Поиск адреса)

Процесс поиска IP-адреса проходит через несколько этапов кэширования:

  1. Локальный кэш браузера: Браузер сначала проверяет, не заходили ли вы на этот сайт недавно.
  2. Кэш ОС и файл hosts: Если в браузере пусто, запрос уходит в операционную систему.
  3. DNS-рекурсор (Провайдер): Если и тут пусто, запрос отправляется к DNS-серверу вашего провайдера.
  4. Иерархия DNS-серверов: Если провайдер не знает адрес, начинается цепочка запросов к корневым серверам (.), затем к серверам зоны (.com, .ru) и, наконец, к авторитетному DNS-серверу, который владеет записью конкретного домена.

2. Установление соединения (TCP и TLS)

Когда IP-адрес получен, начинается процесс «рукопожатия» (Handshake).

    • TCP Handshake: Чтобы данные не потерялись, браузер и сервер должны договориться о связи. Это происходит через «трехстороннее рукопожатие» (SYN $\rightarrow$ SYN-ACK $\rightarrow$ ACK).
    • TLS Handshake: Поскольку почти весь современный веб работает по HTTPS, поверх TCP настраивается шифрование. Браузер и сервер обмениваются сертификатами, согласовывают версию протокола TLS и генерируют общий секретный ключ для шифрования трафика.

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

Только теперь браузер отправляет GET-запрос: «Привет, сервер, пришли мне главную страницу (/)». Сервер обрабатывает этот запрос, подбирает нужный файл или генерирует его «на лету» и отправляет ответ с HTTP-статусом (например, 200 OK) и телом ответа (HTML-кодом).

Часть 2: Критический путь рендеринга (Critical Rendering Path)

Теперь HTML-код оказался в памяти браузера. Но это просто текстовый файл. Чтобы превратить его в визуальную страницу, браузер запускает сложный процесс рендеринга.

1. Построение DOM (Document Object Model)

Браузер читает HTML-код сверху вниз и превращает его в дерево объектов. Если он встречает тег <div>, он создает узел в дереве. Если внутри него <span>, этот узел становится дочерним.

2. Построение CSSOM (CSS Object Model)

Параллельно с DOM браузер находит ссылки на CSS-файлы. Он скачивает их и строит дерево стилей. Это критический момент: CSS считается блокирующим ресурсом. Пока CSSOM не будет полностью построен, браузер не начнет отрисовку, чтобы пользователь не увидел «голый» HTML без оформления (эффект FOUC — Flash of Unstyled Content).

3. Создание Render Tree и Layout

Браузер объединяет DOM и CSSOM в Render Tree. В это дерево попадают только те элементы, которые будут видны на экране (например, элементы с display: none в него не включаются).
После этого происходит этап Layout (или Reflow): браузер вычисляет точные координаты и размеры каждого элемента. Где будет находиться кнопка? Какова ширина этого блока относительно ширины экрана?

4. Painting и Compositing

На финальном этапе происходит «отрисовка» (Painting) — закрашивание пикселей. Затем, если страница сложная (с использованием z-index или transform), браузер разбивает страницу на слои и склеивает их (Compositing) с помощью видеокарты (GPU), чтобы обеспечить плавность прокрутки и анимаций.

Часть 3: Гидратация. Оживление «мертвого» HTML

Здесь мы подходим к самому интересному. В современном вебе часто используются фреймворки (React, Vue, Next.js, Nuxt). Чтобы сайт загружался мгновенно, применяется SSR (Server Side Rendering) — сервер присылает уже готовый, отрендеренный HTML.

Проблема: Этот HTML — «мертвый». В нем есть кнопки, но при клике на них ничего не происходит, потому что JavaScript еще не загрузился или не применился к элементам.

Что такое гидратация (Hydration)?

Гидратация — это процесс «наполнения» статического HTML-каркаса интерактивностью. Это похоже на то, как если бы вы купили сублимированный суп: сервер прислал вам «порошок» (HTML), а клиентский JavaScript «добавляет воду» (события, стейт, логику), превращая его в полноценное блюдо.

Как это работает пошагово:

  1. Загрузка JS: Браузер скачивает JavaScript-бандл.
  2. Выполнение кода: JS запускается и начинает строить свое собственное виртуальное дерево компонентов.
  3. Сверка (Reconciliation): Фреймворк сравнивает виртуальное дерево с тем HTML, который уже пришел от сервера.
  4. Привязка событий: Если структуры совпадают, JS просто «навешивает» обработчики событий (onClick, onChange) на существующие DOM-узлы.

Проблемы гидратации

Гидратация — это дорогой процесс. Если сервер прислал один HTML, а клиентский JS при рендере решил, что там должно быть что-то другое (например, из-за разницы в часовых поясах или случайных чисел), возникает Hydration Mismatch. Это приводит к ошибкам в консоли и, в худшем случае, к перерисовке всей страницы, что сводит на нет все преимущества SSR.

Современные решения:
Чтобы избежать «замирания» страницы при гидратации, появились новые подходы:

    • Selective Hydration: Гидратация только тех частей страницы, с которыми пользователь начал взаимодействовать.
    • Islands Architecture (Архитектура островов): Когда большая часть страницы остается статичной, а «островами» интерактивности становятся только отдельные виджеты (например, корзина или форма поиска).

Итоги: цепочка в одной схеме

Если сжать всё вышеописанное, путь выглядит так:

  1. DNS $\rightarrow$ поиск IP.
  2. TCP/TLS $\rightarrow$ установление защищенного соединения.
  3. HTTP Request/Response $\rightarrow$ получение HTML.
  4. DOM + CSSOM $\rightarrow$ расчет геометрии и отрисовка (Первая отрисовка).
  5. JS Loading $\rightarrow$ загрузка логики.
  6. Hydration $\rightarrow$ привязка JS к HTML $\rightarrow$ страница стала интерактивной.

Понимание этой цепочки позволяет разработчику осознанно оптимизировать сайт: уменьшать размер CSS, чтобы ускорить First Contentful Paint, или использовать стратегический сплиттинг JS, чтобы ускорить время до полной интерактивности (Time to Interactive).