По какому протоколу отправляются запросы из браузера к серверу

HTTP/1.1, HTTP/2 и HTTP/3: эволюция протоколов для браузерных запросов

Запросы из браузера к серверу в подавляющем большинстве случаев отправляются по протоколу HTTP (HyperText Transfer Protocol) или его безопасной версии HTTPS (HTTP Secure). Этот протокол является фундаментальным для взаимодействия клиента (браузера) и сервера в веб-среде. Однако важно понимать, что за последние годы протокол претерпел значительную эволюцию.

Ключевые версии HTTP

HTTP/1.1 — долгое время был стандартом де-факто. Его основные характеристики:

• Текстовый протокол (хотя может передавать бинарные данные)
• Поддерживает persistent-соединения для уменьшения задержек
• Имеет ограничение на количество параллельных соединений к одному домену (обычно 6-8)
• Каждый запрос/ответ имеет значительные накладные расходы из-за заголовков

Пример типичного HTTP/1.1-запроса:

GET /api/users HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Connection: keep-alive

HTTP/2 — представляет собой значительную оптимизацию:

• Бинарный протокол (вместо текстового)
• Мультиплексирование: множество запросов/ответов в рамках одного TCP-соединения
• Сжатие заголовков HPACK
• Приоритизация потоков
• Server push (возможность сервера отправлять ресурсы до запроса клиентом)

HTTP/3 — новейшая версия, основанная на QUIC (транспортный протокол поверх UDP):

• Уменьшенная задержка установки соединения (0-RTT в некоторых случаях)
• Улучшенная обработка потери пакетов
• Встроенная безопасность (шифрование на транспортном уровне)
• Независимые потоки (проблема в одном потоке не блокирует другие)

Безопасность: HTTP vs HTTPS

HTTPS — это HTTP поверх защищённого транспортного уровня TLS/SSL:

// Браузер автоматически определяет необходимость HTTPS
// Пример различий в URL:
const httpUrl = 'http://example.com';  // Небезопасно
const httpsUrl = 'https://example.com'; // Безопасно, с шифрованием

// Современные браузеры помечают HTTP-сайты как "Небезопасные"
// и требуют HTTPS для многих современных API (геолокация, уведомления и др.)

Альтернативные протоколы для специализированных задач

Хотя HTTP(S) доминирует, существуют и другие протоколы для определённых сценариев:

WebSocket — для двусторонней реальной коммуникации:

// Установка WebSocket-соединения
const socket = new WebSocket('wss://example.com/socket');

// WebSocket начинается с HTTP-запроса для "апгрейда" соединения,
// затем переходит на отдельный протокол для двусторонней связи

WebRTC — для peer-to-peer коммуникации (видео, аудио, данные):

• Использует UDP для уменьшения задержки
• Часто применяется в видеоконференциях, онлайн-играх
• Требует сигнальный сервер (обычно через WebSocket) для установки соединения

DNS и TCP: фундамент HTTP-запросов

Прежде чем отправить HTTP-запрос, происходит несколько важных шагов:

1. DNS-запрос — разрешение доменного имени в IP-адрес
2. Установка TCP-соединения (3-way handshake)
3. TLS-рукопожатие (для HTTPS) — установка безопасного соединения
4. Отправка HTTP-запроса и получение ответа

// Весь этот процесс скрыт от разработчика, но его можно отследить:
console.time('Запрос к серверу');
fetch('https://api.example.com/data')
  .then(response => {
    console.timeEnd('Запрос к серверу');
    // В это время выполнились DNS, TCP, TLS и HTTP этапы
  });

Практическое влияние на разработку Frontend

Понимание протоколов влияет на оптимизацию производительности:

• HTTP/2 устраняет проблему конкатенации файлов — множественные маленькие файлы могут быть эффективнее одного большого
• Приоритизация ресурсов — критически важный CSS можно загружать с высоким приоритетом
• Предзагрузка и предподключение — использование <link rel="preconnect"> и <link rel="dns-prefetch">
• Адаптация под HTTP/3 — который становится стандартом в современных браузерах и серверах

В современных браузерах поддержку протоколов можно проверить в DevTools:

1. Вкладка Network покажет используемую версию HTTP (http/1.1, h2, h3)
2. Заголовок Alt-Svc может указывать на доступность HTTP/3
3. Security tab показывает детали TLS-соединения

Вывод: хотя базовым протоколом остаётся HTTP(S), современный Frontend-разработчик должен понимать различия между версиями и оптимизировать приложения с учётом особенностей HTTP/2 и HTTP/3, используя их преимущества для ускорения загрузки и улучшения пользовательского опыта.