Протоколы — это правила в интернете, по которым устройства с разными операционными системами и программным обеспечением обмениваются данными. С их помощью, например, пользователь Safari на MacBook получает сообщение, отправленное через Chrome на Android.
Чтобы обмениваться данными было удобнее, задачи по их отправке и получению разделены. Создана архитектура «клиент-сервер», где клиент отправляет запрос, а сервер принимает его и возвращает ответ.
Сервер — это специальная программа, или мощный компьютер, его ещё называют хост-системой. Клиент — любое устройство для работы с сайтом, например, ноутбук, смартфон или бортовой компьютер в автомобиле.
Веб-приложение — это клиент-серверное приложение, в котором клиентом выступает браузер. Допустим, на сервере хранится HTML-страница с кодом. Браузер получает файл и показывает этот код как привычную страницу сайта.
Какие бывают протоколы
Протоколы определяют правила выполнения конкретных задач. Но фронтендерам необязательно знать все существующие протоколы — достаточно разбираться в основных.
👉 Хочется разобраться в протоколах?
У нас появился курс «Протоколы и сети». Он научит вас понимать принципы передачи данных и защищать свой код от атак.
Internet Protocol — IP
IP отвечает за поиск компьютеров в сети по их IP-адресам. Ещё он предоставляет стратегию маршрутизации, то есть составляет оптимальный маршрут для передачи данных.
Данные в интернете передаются IP-пакетами. У каждого пакета есть заголовок и данные. В заголовке находятся IP-адреса источника и пункта назначения. Данные — это само содержимое, например, часть веб-страницы.
Работу IP можно сравнить с почтовым отделением: протокол направляет IP-пакеты по интернету так же, как почта рассылает письма по всему миру. При доставке почта использует пункты передачи: письмо из отделения сначала попадает на поезд, потом на грузовик и в конце вручается адресату. В интернете тоже есть «пункты передачи» — их называют маршрутизаторами. Цель маршрутизатора — отправить пакет в пункт назначения по самому короткому пути. Если всё идёт хорошо, пакет прибывает на ближайший к получателю маршрутизатор, который точно знает, куда его отправить. Но бывает и так, что какой-то из маршрутизаторов на пути взломан или вышел из строя, и тогда выбирается другой путь:
DNS
Уникальный IP-адрес есть у каждого домена. Он записывается в виде четырёх чисел от нуля до 255 — например, 74.125.20.113. Введите этот адрес в браузерную строку и посмотрите, на какой сайт вы попали.
DNS связывает IP-адрес с понятным для людей доменным именем, например, 178.79.181.169 превращается в htmlacademy.ru:
Принцип работы DNS похож на поиск и вызов контактов в телефоне. Вряд ли кто-то помнит 1317а друзей — да это и необязательно, ведь они хранятся в списке контактов. Когда мы хотим кому-то позвонить, то просто находим нужное имя и нажимаем кнопку вызова — в этот момент начинается соединение, но не по имени, а по 1317у телефона.
DNS-сервер — это и есть «список всех контактов», то есть IP-адресов, которые там хранятся. Каждому IP-адресу присвоен домен. И когда мы вводим в строке браузера имя домена, то происходит запрос к DNS-серверу — запрашивается IP-адрес.
SSL/TLS
SSL — криптографический протокол шифрования запросов и ответов, он нужен для безопасного перемещения данных по интернету, а TLS — его продвинутая версия. SSL уже почти не используют, но это название было таким популярным, что его до сих пор употребляют, а любой SSL-сертификат у хостинг-компаний — TLS-сертификат.
TCP и UDP
Оба протокола отвечают за передачу данных и работают поверх IP, но с небольшой разницей. TCP доставляет данные без потерь, поэтому его используют для передачи фотографий, сообщений и другой важной информации. А вот UDP не гарантирует доставку, но зато он гораздо быстрее. Его используют, когда скорость важнее надёжности, например, при передаче аудиосообщений или видеотрансляциях.
HTTP и HTTPS
HTTP и HTTPS предназначены для передачи данных и в итоге пользователи могут просматривать веб-страницы. На самом деле HTTPS — это не отдельный протокол, а расширение HTTP. Он безопаснее, так как использует SSL/TLS для шифрования обычных запросов и ответов.
HTTP
HTTP — один из самых используемых протоколов в интернете, поэтому посмотрим подробнее, как он работает.
Протокол работает в формате запрос-ответ с двумя участниками общения:
- клиент — формирует запросы и обрабатывает ответы;
- сервер — обрабатывает запросы и формирует ответы.
Клиент делает запрос на сервер для передачи каждого ресурса: файлов HTML, CSS, JavaScript, изображений или видеофайлов. Затем сервер отвечает на запрос, отправляя ресурс.
Представим, что мы создали HTML со следующей разметкой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная страница</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="logo.svg" alt="">
</header>
</body>
</html>
Это простой HTML-файл, в котором подключены два ресурса: стилевой файл style.css и изображение logo.svg. Браузер запросит три ресурса: index.html, style.css и logo.svg.
Для каждого запроса и ответа открывается своё TCP-соединение. При каждом соединении происходит трёхстороннее «рукопожатие»: клиент и сервер трижды обмениваются пустыми пакетами данных, чтобы удостовериться в существовании друг друга и готовности к работе с данными:
Запрос-ответ выглядит так:
Трёхстороннее «рукопожатие» нужно проводить в каждом TCP-соединении, так как HTTP не запоминает состояния, поэтому ни клиент, ни сервер не могут сохранять информацию между различными запросами. HTTP — один из самых ранних протоколов, и при его создании никто не ожидал, что на веб-странице придётся загружать так много ресурсов.
Такое «рукопожатие» делает загрузку страницы медленнее. Чтобы решить проблему, разработчикам приходится сокращать количество загружаемых ресурсов, например, использовать спрайты или разделять файлы по разным доменам — этот метод называется domain sharding. Такие манипуляции уменьшают количество TCP-соединений, хотя и создают свои трудности.
HTTP/2
HTTP/2 — улучшенная версия HTTP. По данным Can I Use, его поддерживают большинство браузеров.
Главное нововведение этого протокола — одно TCP-соединение на разные запросы, или мультиплексирование:
Как выглядит запрос-ответ в HTTP/2:
Ещё в HTTP/2 появился push-сервер, то есть сервер может отправлять больше ответов на один клиентский запрос. Например, если клиент запрашивает файлы index.html, style.css и logo.svg, то сервер отправит сразу три файла. Без push-сервера клиенту нужно запрашивать каждый файл отдельно
Поэтому многие оптимизации под HTTP при переходе на HTTP/2 уже не нужны. Например, можно отказаться от разделения ресурсов по доменам.
HTTP/3
HTTP/3 — третья версия HTTP, основанная на QUIC — протоколе, который предполагает быстрое подключение к интернету через UDP.
Главное преимущество HTTP/3 — сокращение задержки при установке соединения. QUIC достаточно одного «рукопожатия», чтобы установить безопасный сеанс. А ещё HTTP/3 работает поверх UDP, поэтому скорость доставки данных быстрее, чем у HTTP и HTTP/2 поверх TCP.
Протокол уже получил статус предложенного стандарта, то есть браузеры почти завершили работу над поддержкой протокола. Но пока поддержки недостаточно, чтобы переводить сайт с HTTP/2 на HTTP/3.
WebSockets
В этом протоколе соединение устанавливается гораздо быстрее, чем в HTTP — здесь отправляется «рукопожатие» сразу со всей необходимой информацией для передачи данных. Канал при этом остаётся открытым, пока кто-то из сторон не прервёт его. Это означает, что запросы и ответы будут происходить практически мгновенно. А если сервер получит новые данные, он отправит их клиенту без запроса.
Протокол WebSockets используют там, где важна скорость доставки данных, например, в чатах и мессенджерах, играх, онлайн-трансляциях. Он, скорее всего, не пригодится при разработке простых веб-приложений, небольших CMS или при использовании REST API, где достаточно HTTP-запросов GET, POST, PUT и DELETE.
Зачем разбираться в протоколах и сетях
Протоколы — это то, с чем вы уже работали, но, возможно, даже не подозревали. Зная принципы их работы, вы сможете глубже разобраться в связи фронтенда и бэкенда, а ещё поймёте, какие оптимизации проводить в веб-приложении, как лучше передавать данные или как защитить сайт от взлома.
Выбор технологии для приложения
Знание протоколов даёт понимание, какие технологии использовать для определённых задач. Какой протокол выбрать для онлайн-чата с большим количеством пользователей, а какой — для загрузки фотографии пользователя в профиль.
Защита данных
Если знать уязвимости на пути передачи данных, можно предусмотреть и смягчить последствия атак на веб-приложение. Например, создать стратегию защиты данных банковских карт на стороне клиента и на стороне сервера.
Оптимизация приложения под протоколы
Зная особенности протоколов, можно ускорить веб-приложение и не тратить время на ненужную оптимизацию. А ещё появляется понимание, что менять при переходе на другой протокол.
Например, чтобы оптимизировать приложение под HTTP/1, нужно уменьшить количество TCP-соединений. Для этого разработчики сокращают количество файлов: все стили объединяют в styles.css, а все скрипты — в scripts.js. Для HTTP/2 такая оптимизация не нужна, поэтому можно разделить общие CSS и JS-файлы на отдельные и подключать на страницу только необходимые.
Спрайты — оптимизация для протокола HTTP. Их минус в том, что для каждой страницы загружается спрайт с иконками всего веб-приложения, даже если на странице используется всего несколько иконок. Для HTTP/2 можно загружать только те изображения, которые нужны пользователю. При этом необязательно полностью избавляться от спрайтов — можно создать спрайты для компонентов и использовать необходимые на конкретной странице.
Если приложение оптимизировано к HTTP/2, то для перехода на HTTP/3 ничего не нужно делать: все оптимизации подойдут и для HTTP/3.
Прохождение собеседований
Знание протоколов и сетей повышает ценность фронтендера и влияет на его зарплату. Чтобы успешно пройти собеседование на мидла в крупные компании, полезно знать TCP/IP, HTTP/HTTPS, DNS и WebSocket. Ещё нужно хотя бы на базовом уровне знать про безопасность: XSS-атаки и CORS — а разобраться в этой теме без знания протоколов не получится.
При разработке приложений полезно знать, как работает веб и по каким принципам передаются данные. Понимание протоколов позволяет шире смотреть на свою работу, а также знать, куда движется сфера IT и какие технологии будут востребованы в будущем. А ещё эти знания пригодятся при собеседовании на позицию мидла или сеньора.