Зарегистрируйтесь, чтобы продолжить обучение

HTTP/2 и HTTP/3 Протокол HTTP

Представьте себе время, когда интернет только начинал набирать популярность, и HTTP/1.1 был стандартом для передачи данных. Это был период, когда сайты были проще, с небольшим количеством изображений и текстом. Но с развитием технологий и ростом популярности мультимедийного контента, веб-страницы становились все сложнее, насыщеннее и требовательнее к ресурсам.

HTTP/1.1 работал хорошо для своих времен, но по мере усложнения веб-сайтов начали проявляться его ограничения. Одной из главных проблем был принцип работы "один запрос - один ответ". Представьте, что вам нужно открыть сайт с множеством изображений, скриптов и стилей. Каждый элемент сайта требовал отдельного запроса и ответа. Это приводило к тому, что браузеру приходилось устанавливать несколько соединений с сервером, что увеличивало нагрузку на сеть и замедляло загрузку страницы. Каждое из этих соединений требовало своей установки и завершения, что добавляло значительную задержку.

+----------------------+     +----------------------+
|      Browser         |     |       Server         |
+----------------------+     +----------------------+
         |                            |
         |-------Request 1----------->|
         |                            |
         |<------Response 1-----------|
         |                            |
         |-------Request 2----------->|
         |                            |
         |<------Response 2-----------|
         |                            |
         |-------Request 3----------->|
         |                            |
         |<------Response 3-----------|

Эта задержка усиливалась еще больше из-за проблемы, известной как "голодание по очереди" или "Head-of-Line blocking". Представьте, что вы стоите в очереди в магазин, но касса обслуживает только одного человека за раз, и пока этот человек не закончит, никто другой не может подойти. В HTTP/1.1, если одно соединение занимало много времени для обработки одного запроса, остальные запросы на этом соединении тоже задерживались, что существенно снижало скорость загрузки страниц.

Еще одной значительной проблемой была избыточность данных. Каждый HTTP-запрос и ответ включал в себя множество заголовков, которые часто повторялись. В условиях современного веба, где страницы могут содержать десятки и сотни элементов, это приводило к передаче большого объема избыточной информации, что увеличивало время загрузки.

HTTP/2

Эти проблемы стали настолько очевидными, что возникла необходимость в новом подходе. Так появился HTTP/2, который был разработан с учетом всех этих недостатков. Основная цель HTTP/2 была сделать веб быстрее и эффективнее. Он ввел множество новшеств, таких как мультиплексирование, сжатие заголовков и приоритизацию запросов, которые позволили значительно улучшить производительность и уменьшить задержки.

Данные и заголовки в HTTP/2 передаются в бинарном формате, что делает их более компактными с одной стороны, но с другой, полностью пропадает возможность их читать и отправлять в сыром виде, то есть такие запросы нельзя сделать с помощью Telnet. Несмотря на это, сам формат запроса и ответа остается тем же самым, поэтому более высокоуровневые инструменты, такие как DevTools в браузере, работают с этой версией протокола, как и раньше показывая стандартные элементы HTTP протокола. Самым простым способом попробовать выполнить запрос используя HTTP/2, становится curl:

curl --http2 -I https://http.hexlet.app/http-protocol/example

Мультиплексирование

Мультиплексирование в HTTP/2 — это одна из ключевых технологий, которая существенно улучшает производительность и эффективность сети по сравнению с HTTP/1.1. Давайте подробнее разберем, как это работает и почему это так важно.

Мультиплексирование позволяет множеству запросов и ответов передаваться одновременно по одному TCP-соединению. В HTTP/1.1 для каждого запроса создается отдельное соединение, что приводит к избыточным задержкам и блокировкам. В HTTP/2 все запросы и ответы могут делиться одним соединением, что устраняет эти проблемы.

HTTP/1.1:
Request 1  ------> Response 1
Request 2  ------> Response 2 (ждет окончания Response 1)
Request 3  ------> Response 3 (ждет окончания Response 2)
...

В HTTP/2 все запросы и ответы идут параллельно по одному соединению. Это значит, что никакой запрос не блокирует другой, и сервер может отправлять ответы в том порядке, в котором они готовы.

+-----------------------------------------------------+
|         Установление соединения (TCP Handshake)     |
|-----------------------------------------------------|
|   Запрос 1   |   Запрос 2   |   Запрос 3   |   ...  |
|--------------|--------------|--------------|--------|
|   Ответ 1    |   Ответ 2    |   Ответ 3    |        |
+-----------------------------------------------------+

Преимущества мультиплексирования

  • Устранение блокировок: Благодаря тому, что запросы могут выполняться параллельно, даже если один из них занимает много времени, другие не будут ждать его завершения.

  • Эффективное использование одного соединения: Одно соединение используется для передачи всех данных, что снижает накладные расходы на установку и поддержание соединений.

  • Приоритизация: HTTP/2 позволяет задавать приоритеты для запросов. Например, важные ресурсы (CSS, JS) могут загружаться первыми, обеспечивая более быструю и эффективную загрузку страниц.

HTTPS

Хотя HTTP/2 может работать как с использованием шифрования (HTTPS), так и без него (HTTP), большинство современных браузеров требуют использования HTTPS для активации HTTP/2. Это связано с тем, что шифрование данных и защита конфиденциальности становятся всё более важными в современном интернете.

Server Push

Server push позволяет серверу отправлять клиенту (например, браузеру) ресурсы заранее, до того как клиент их запросит. Это может включать в себя CSS, JavaScript, изображения и другие файлы, которые сервер знает, что клиенту понадобятся для корректного отображения страницы.

Когда клиент делает запрос на сервер (например, для загрузки HTML-страницы), сервер может предугадать, какие дополнительные ресурсы потребуются клиенту для загрузки и отображения этой страницы. Вместо того чтобы ждать, пока клиент запросит эти ресурсы, сервер может сразу отправить их вместе с первоначальным ответом.

  1. Клиент запрашивает главную страницу index.html.
  2. Сервер знает, что для отображения index.html нужны также файлы styles.css и script.js.
  3. Сервер отправляет index.html, а также инициирует push для styles.css и script.js.

HTTP/1.1 без Server Push

Client: GET /index.html
Server: 200 OK (index.html)

Client: GET /styles.css
Server: 200 OK (styles.css)

Client: GET /script.js
Server: 200 OK (script.js)

HTTP/2 с server push

Client: GET /index.html
Server: 200 OK (index.html)
Server: PUSH /styles.css
Server: PUSH /script.js

Server push в HTTP/2 значительно улучшает производительность веб-сайтов, позволяя серверу проактивно отправлять ресурсы клиенту. Это сокращает задержки, оптимизирует процесс загрузки страницы и улучшает общее взаимодействие с пользователем.

HTTP/3

HTTP/3 — это последняя версия протокола HTTP, разработанная для преодоления ограничений предыдущих версий и улучшения производительности, надежности и безопасности. HTTP/3 основан на новом транспортном протоколе QUIC, который заменяет традиционный TCP. Давайте рассмотрим историю, причины появления и основные преимущества HTTP/3.

HTTP/1.1 и HTTP/2 работают поверх TCP (Transmission Control Protocol), который был разработан десятилетия назад и имеет свои ограничения. Несмотря на улучшения, внесенные в HTTP/2, такие, как мультиплексирование и сжатие заголовков, они все еще наследуют проблемы TCP, например, задержки при установке соединений и потери пакетов.

QUIC (Quick UDP Internet Connections) был разработан Google и предложен как решение для улучшения производительности сетевых приложений. QUIC использует UDP (User Datagram Protocol) вместо TCP, что позволяет обходить некоторые ограничения TCP и предоставляет новые возможности для оптимизации.

Преимущества HTTP/3

  • Быстрое установление соединения:

    • QUIC использует минимальное количество рукопожатий для установления соединения, что значительно сокращает задержки по сравнению с TCP.
    • QUIC включает шифрование TLS на этапе установления соединения, что позволяет избежать дополнительных рукопожатий, необходимых для TLS в TCP.
  • Устранение Head-of-Line Blocking:

    • В TCP, потеря пакета приводит к задержке всех последующих данных, так как они должны быть доставлены в порядке. QUIC решает эту проблему, позволяя независимую доставку потоков данных, что снижает задержки.
  • Миграция соединений:

    • QUIC поддерживает миграцию соединений, что позволяет продолжать передачу данных даже при смене IP-адресов. Это особенно полезно для мобильных устройств, которые могут переключаться между сетями.
  • Встроенное шифрование:

    • QUIC по умолчанию использует шифрование, обеспечивая конфиденциальность и целостность данных.

Как работает HTTP/3

Установление соединения

В отличие от TCP, где требуется несколько рукопожатий для установления соединения и шифрования TLS, QUIC использует одно рукопожатие для обоих процессов.

Передача данных

HTTP/3 использует многопотоковую передачу данных поверх QUIC, что позволяет каждому потоку данных передаваться независимо. Это устраняет проблему блокировки при потере пакетов и повышает общую производительность.

Установление соединения в HTTP/2 поверх TCP

Client: SYN -> Server
Server: SYN-ACK -> Client
Client: ACK -> Server
Client: ClientHello (TLS) -> Server
Server: ServerHello (TLS) -> Client
...

Установление соединения в HTTP/3 поверх QUIC

Client: Initial Packet (QUIC + TLS) -> Server
Server: Initial Packet (QUIC + TLS) -> Client

HTTP/3, основанный на QUIC, представляет собой значительный шаг вперед в эволюции интернет-протоколов, предлагая улучшения в скорости, надежности и безопасности. Однако, процесс перехода на него может занять очень продолжительное время. Пока протокол еще в стадии разработки, хотя некоторые сервисы и браузеры уже его поддерживают, даже несмотря на то, что стандарт все еще меняется.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на Python, Разработка веб-приложений и сервисов используя Django, проектирование и реализация REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
Тестирование веб-приложений, чек-листы и тест-кейсы, этапы тестирования, DevTools, Postman, SQL, Git, HTTP/HTTPS, API
4 месяца
с нуля
Старт 26 декабря
профессия
Программирование на Java, Разработка веб-приложений и микросервисов используя Spring Boot, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на PHP, Разработка веб-приложений и сервисов используя Laravel, проектирование и реализация REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript в браузере и на сервере (Node.js), разработка бекендов на Fastify и фронтенда на React
16 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript, разработка веб-приложений, bff и сервисов используя Fastify, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря
профессия
новый
Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL
8 месяцев
c опытом
Старт 26 декабря

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»
Изображение Тото

Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу