PrepBro
← Назад к вопросам

Что происходит после отправления запроса в браузере

1.8 Middle🔥 161 комментариев
#Автоматизация тестирования#Инструменты тестирования#Теория тестирования

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что происходит после отправки запроса в браузере: полный цикл от клика до рендеринга

Этот процесс, известный как "путь критического рендеринга" (Critical Rendering Path), представляет собой сложную цепочку событий, включающую сетевые протоколы, обработку браузером и рендеринг. Вот детальное пошаговое объяснение.

1. Парсинг URL и проверка кеша

Когда пользователь нажимает Enter или кликает по ссылке, браузер сначала анализирует URL (протокол, домен, путь, параметры). Перед любым сетевым запросом проверяются кеши:

  • Кеш браузера (Memory/Disk Cache): Ищется кешированная версия ресурса (HTML, CSS, JS, изображения) с учетом заголовков Cache-Control, ETag, Last-Modified. Если найден свежий кеш, ресурс загружается мгновенно, минуя сеть.
  • Кеш DNS: Проверяется, разрешён ли домен недавно, чтобы избежать повторного DNS-запроса.

2. DNS-запрос (разрешение доменного имени)

Если домен не закэширован, происходит DNS-резолвинг:

# Упрощённый пример цепочки запросов:
Браузер → Кеш ОС → Резолвер провайдера → Корневые серверы (.)
→ Серверы домена верхнего уровня (.com) → Авторитативные серверы домена

Браузер получает IP-адрес сервера (например, 142.250.185.78 для google.com).

3. Установка TCP-соединения и TLS-рукопожатие

Браузер устанавливает надежное соединение с сервером:

  • TCP handshake (трёхстороннее рукопожатие): SYN → SYN-ACK → ACK. Для HTTPS добавляется этап TLS handshake (обмен сертификатами, согласование шифрования), что увеличивает задержку.
# Псевдокод установки соединения
def establish_connection(ip, port=443):
    send_syn()           # Шаг 1: SYN
    receive_syn_ack()    # Шаг 2: SYN-ACK
    send_ack()           # Шаг 3: ACK
    if https:
        perform_tls_handshake()  # Обмен ключами
    return connection

4. Отправка HTTP-запроса и получение ответа

После установки соединения браузер отправляет HTTP-запрос:

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html,application/xhtml+xml
Cookie: session_id=abc123

Сервер обрабатывает запрос (обращается к бэкенду, БД) и возвращает HTTP-ответ:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Cache-Control: max-age=3600
Content-Length: 1256

<!DOCTYPE html><html>...</html>

При кодах перенаправления (3xx) браузер повторяет запрос по новому URL.

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

Браузер начинает обрабатывать ответ:

  • Токенизация HTML: Поток байтов декодируется в символы, разбивается на токены (теги, атрибуты, текст).
  • Построение DOM (Document Object Model): Токены преобразуются в узлы дерева, связанные иерархически (родитель-потомок).
// Пример DOM-структуры для <html><body><h1>Hello</h1></body></html>
document
└── html
    └── body
        └── h1
            └── textNode("Hello")
  • Загрузка внешних ресурсов: При встрече <link>, <script>, <img> браузер параллельно запрашивает CSS, JS, изображения.

6. Обработка CSS и построение CSSOM

CSS-файлы парсятся в CSSOM (CSS Object Model) — дерево стилей с учётом каскада, специфичности и наследования. CSSOM блокирует рендеринг (Render-Blocking), поэтому оптимизация CSS критична.

7. Выполнение JavaScript

Обычные (не async/defer) скрипты блокируют парсинг HTML, так как могут изменять DOM/CSSOM. Браузер приостанавливает построение DOM до загрузки и выполнения скрипта. Механизм V8/SpiderMonkey компилирует и выполняет JS.

8. Формирование Render Tree и Layout

Браузер комбинирует DOM и CSSOM в Render Tree — содержит только видимые элементы (без display: none, <head>). Затем происходит Layout (Reflow) — расчёт точных позиций и размеров каждого элемента в окне браузера с учётом вьюпорта, медиа-запросов.

9. Рисование (Painting) и Композиция (Composition)

  • Paint: Render Tree разбивается на слои, каждый слой рисуется отдельно (растеризация) в пиксели (заполнение цветом, текст, тени).
  • Composite: Слои объединяются в окончательное изображение с учётом трансформаций (CSS transform, opacity). GPU ускоряет композицию.

10. Отображение и последующие события

Готовый кадр передаётся на отображение (Display). После загрузки страницы запускаются события:

  • DOMContentLoaded — DOM готов, но ресурсы (изображения) могут ещё грузиться.
  • load — полностью загружены все ресурсы.

Факторы, влияющие на производительность

  • Сетевая задержка: RTT, количество доменов (CDN), HTTP/2 vs HTTP/1.1.
  • Оптимизации рендеринга: Минификация, сжатие (gzip/Brotli), ленивая загрузка (Lazy Loading), async/defer для скриптов.
  • Блокирующие ресурсы: CSS в <head>, скрипты без атрибутов async/defer.

Для QA-инженера понимание этого цикла критично для:

  • Планирования тестов производительности и скорости загрузки.
  • Анализа проблем кроссбраузерности (разные движки рендеринга).
  • Отладки сетевых проблем и таймаутов.
  • Тестирования кеширования и поведения при слабом интернете.