Дисклеймер
Эта статья пригодится тем, кто только начал заниматься FrontEnd разработкой и для тех у кого нет знаний в этой сфере. Данная статья поможет понять, что из себя представляет компьютерная сеть, из каких элементов она состоит и как данные перемещаются по сети.
Если вы занимаетесь BackEnd разработкой и имеете знания в этой сфере, то эта статья вам вряд ли чем-то поможет. Здесь приведены только основные аспекты, не погружаясь в детали.
Направление моего блога FrontEnd разработка. Всё, что касается FrontEnd разработки я буду описывать подробно, а что выходит за рамки этой сферы - менее углубленно. Но вещи, которые нам пригодятся в работе мы рассмотрим как можно лучше.
Введение
Для того, чтобы создавать веб-сайты, необходимо знать, что такое интернет, и как данные перемещаются по сети.
Интернет - это множество компьютерных сетей, которые передают данные между собой. А теперь, давайте подробнее расскажем о том, что такое компьютерные сети.
Что такое сеть?
Сеть - это группа компьютеров, которые соединены между собой каналом связи. Канал связи обеспечивает обмен данными внутри сети. То есть, все компьютеры, которые подключены к одной сети могут общаться друг с другом.
Компьютеры могут быть подключены к сети с помощью волоконно-оптического кабеля, телефонной линии или мобильной связи. Это самые распространённые варианты подключения к сети, хотя на самом деле их больше.
Есть несколько типов компьютерных сетей:
- Локальная сеть (LAN)
- Беспроводная локальная сеть (WLAN)
- Региональная сеть (MAN)
- Корпоративная сеть (EWN)
- Глобальная сеть (WAN)
Также, существуют и другие типы сетей, которые решают определённый круг задач. Пока глобально мы это затрагивать не будем, просто нужно знать, что существует огромное количество типов сетей, и каждый тип предназначен для решения своих задач.
Локальная сеть соединяет группы компьютеров, которые находятся в пределах одного здания, или группы зданий, которые расположены не далеко друг от друга. Задача такой сети состоит в обмене данными компьютеров одной организации, одного заведения или какого-то производственного объекта.
Беспроводная локальная сеть функционирует также как и локальная сеть, но с помощью технологии Wi-Fi.
Региональная сеть - это сеть, которая соединяет множество локальных сетей в рамках одного города, района или региона. Такая сеть, путём объединения всех локальных сетей, может предоставить доступ к интернету целому городу или региону. Региональная сеть решает проблему охвата интернета, поскольку локальные сети могут предоставить интернет только нескольким рядом стоящим зданиям.
Корпоративная сеть (Интранет) обеспечивает доступ к внутренней информации отдельной компании. То есть, сотрудники определённой компании, с помощью корпоративной сети, могут передавать данные друг другу независимо от того в какой точке земного шара они находятся. Также они получают доступ к базам данных своей компании. Такая сеть гарантирует безопасность и упрощает администрирование, и обслуживание оборудования и операционных программ.
Глобальная сеть охватывает огромное количество компьютеров по всему миру. Глобальная сеть позволяет получить доступ к компьютеру, который расположен на другом конце земного шара.
Множество локальных и региональных сетей по всему миру, с помощью огромного количества каналов передачи данных, образует современный интернет.
Что такое интернет
Интернет - это совокупность всех локальных и региональных сетей по всему миру. То есть интернет - это множество компьютерных сетей, которые образуют глобальную сеть, что позволяет каждому интернет пользователю получать и передавать данные в любую точку земного шара.
С сетью мы разобрались, но как же данные перемещаются по сети? Как они находят нужное устройство и доставляются пользователю?
Для ответа на этот вопрос нужно знать что такое:
- Сервер
- Клиент
- IP - адрес
- Доменное имя
- DNS сервер
- Сетевые пакеты
- Маршрутизаторы
- Протоколы передачи данных
Сервер
Все сайты и их файлы хранятся на сервере.
Сервер - это мощный компьютер, выделенный для выполнения сервисной задачи, например, хранение данных сайта и обеспечение доступа к файлам с удалённого клиентского устройства.
Сервер работает 24 часа в сутки 7 дней в неделю, таким образом, гарантирует постоянный доступ к данным, которые хранятся на его жёстком диске.
Сервер подключен напрямую к интернету и доступен через доменное имя, а также имеет неизменный адрес интернет протокола (IP - адрес).
Устройство с которого мы посещаем веб-сайт (мобильный телефон, планшет или компьютер) называется клиентом.
Клиент
Клиент подключен к интернет-сети не напрямую, а с помощью поставщика интернет услуг(провайдера). Также как и сервер клиент имеет свой IP - адрес.
IP - адрес
IP-адрес - это уникальный числовой идентификатор в компьютерной сети, простыми словами - это адрес устройства подключенного к интернет сети. Например IPv4 (Ай-Пи адрес, версия 4) записывается таким образом: 187.53.6.142, где:
- 187.53 - это адрес сети
- 6 - это адрес подсети
- 142 - это адрес устройства в подсети.
Можно провести аналогию с почтовыми адресами. Для того, чтобы нам приходила почта, каждый дом имеет свой уникальный адрес - улицу и номер дома. Также и в интернет пространстве каждое устройство, сайт и сервер имеет свой уникальный IP - адрес, который указан в цифровом формате.
IP-адреса хорошо обрабатываются компьютерами, но для людей они сложно воспринимаются, их легко забыть и они могут меняться со временем, а доменные имена как раз решают эту проблему.
Доменное имя
Доменное имя это адрес веб-сайта, который имеет простую структуру для восприятия человека, например google.com или yandex.ru.
Мы знаем, что IP адрес записывается в трудном цифровом формате. Мы можем не заучивать эти цифры, поскольку можем вбить в адресной строке браузера доменное имя (например, YouTube.com) и получить доступ к сайту. То есть, IP адрес преобразовывается из цифр в понятное для человека слово.
Получается, что IP адрес тоже самое, что и доменное имя - это адрес интернет ресурса в сети. Просто IP адрес предназначен для компьютерных устройств, а доменное имя предназначается для восприятия человека.
То есть, благодаря доменному имени человеку проще найти сайт в интернет пространстве.
Но каким же образом IP адрес преобразовывается из цифр в слова? А помогает в этом технология DNS.
DNS сервер
DNS сервер - это что-то вроде справочника контактов, который переводит сложный цифровой IP адрес в простое для восприятия человека имя. То есть, если сайт имеет такой IP - "134.76.9.151", то DNS сервер преобразовывает его в доменное имя, например - "yandex.ru".
То есть, после того, как мы вводим доменное имя в адресной строке браузера, компьютер отправляет запрос на DNS сервер, DNS сервер обрабатывает запрос, получает нужный IP адрес сайта и направляет наш компьютер по нужному IP адресу, и мы получаем доступ к нужному нам сайту.
Получается, что DNS сервер служит в виде переводчика и переводит с компьютерного языка на человеческий (переводит IP адрес в доменное имя).
Конечно DNS технология работает немного сложнее, просто на данный момент этих знаний нам будет достаточно. Всему своё время, поэтому в будущем мы ещё углубимся в эти темы.
Сетевые пакеты
Итак, мы знаем, что компьютерные устройства могут передавать данные и общаться между собой. Когда мы получаем файл мы получаем его в целом виде, но когда сервер отправляет нам файл, файл разбивается на части, а эти "части" называются сетевыми пакетами.
Давайте представим, что нам отправили картинку (она может быть отправлена как с сервера, так и с компьютерного устройства нашего знакомого). При отправке картинка разбивается на множество частей (пакетов). Компьютеры видят эту картинку как невероятно длинную последовательность нулей и единиц. При отправке такая длинная последовательность нулей и единиц разбивается на более мелкие сегменты, например, в каждом пакете по шесть бит (например - 110101 - шесть бит). Соответственно картинка разбивается на огромное количество пакетов.
При отправке каждый пакет имеет IP адрес сервера, откуда он был отправлен, и IP адрес компьютерного устройства, куда он должен прийти. Также у каждого пакета есть заголовки с информацией для протоколов передачи данных, порядковый номер и часть кода файла, который он должен передать.
Сетевые пакеты отправляются с одного компьютерного устройства на другое, и часто преодолевают огромные расстояния. Им необязательно идти друг за другом, каждый пакет отправляется по своему собственному маршруту, и в этом им помогают маршрутизаторы.
Маршрутизаторы
Маршрутизаторы в компьютерной сети являются навигаторами, которые определяют путь для сетевых пакетов. Сетевые пакеты проходят через огромное количество маршрутизаторов.
Когда пакет достигает маршрутизатора - маршрутизатор извлекает из него IP адрес источника и IP адрес назначения. Потом маршрутизатор определяет самый оптимальный путь до адресата и отправляет пакет по назначенному маршруту, после чего пакет достигает следующего маршрутизатора, который определяет его навигацию и так далее проходя через огромное количество маршрутизаторов.
У каждого маршрутизатора имеется своя таблица маршрутизации. Это база данных маршрутизатора в которых хранятся данные о сети.
Если на каком-либо участке сети произойдёт сбой, то маршрутизатор будет об этом знать и отправит пакет по самому оптимальному пути. А самый оптимальный путь - это тот путь, у которого больше пропускная способность (например, 1GB/сек, а не 100МБ/сек), а также где нет обрывов сети и прочих задержек. Грубо говоря, оптимальный путь - это самый быстрый путь до адресата.
В итоге файл, который отправляется с одного компьютерного устройства на другое, разбивается на тысячи частей (пакетов) и отправляется до адресата через огромное количество маршрутизаторов.
Маршрутизаторы направляют наши пакеты по самому быстрому пути до адресата. Также надо знать, что каждый раз, маршрутизатор для сетевого пакета подбирает свой собственный путь. То есть, наши пакеты не идут друг за другом, а разлетаются по сети в разных направлениях, выбирая лучший маршрут в конкретное время его отправки.
Достигая адресата (нашего компьютерного устройства) все сетевые пакеты собираются в соответствии с их порядковым номером. Если при передачи данных, какие-то пакеты затеряются, то с нашего компьютерного устройства отправляется запрос на повторную отправку потерянных пакетов.
А при помощи какой технологии пакеты собираются на нашем компьютерном устройстве, мы рассмотрим ниже.
Протоколы передачи данных
Для того, чтобы понять как работает интернет, нужно знать как компьютеры связываются и понимают друг друга. В этом им помогают протоколы передачи данных.
Протоколы передачи данных - это набор правил и соглашений, которые определяют обмен данными между разными программами. Эти правила определяют единообразный обмен данными между компьютерами, а также гарантирует доставку данных на нужное устройство без сбоев и ошибок.
Протоколов передачи данных существует огромное количество, и каждый протокол решает определённый круг задач. Существуют даже целые модели протоколов передачи данных (Например, сетевая модель TCP/IP, или модель OSI 7), но мы пока не будем углубляться в суть абстракций каждой модели, просто рассмотрим основные протоколы, которые нам чаще всего будут встречаться, а это - протоколы http, https и стек протоколов TCP/IP.
HTTP это протокол передачи данных в интернете. Это аббревиатура и она расшифровывается как - "Протокол передачи гипертекста" (HyperText Transfer Protocol).
То есть, с его помощью, мы можем открывать сайты и получать доступ к различным файлам в сети.
Также, нужно отметить, что http является протоколом прикладного уровня. То есть, он чаще всего использует возможности транспортного протокола - TCP - для пересылки своих сообщений, хотя он может использовать возможности любого другого надёжного транспортного протокола для пересылки таких сообщений.
HTTP имеет клиент - серверную архитектуру. Простыми словами, когда мы переходим по ссылке или "вбиваем" что-то в адресной строке браузера - мы инициируем запрос. Этот запрос отправляется на сервер, а сервер отправляет ответ браузеру в виде веб-страницы. При чём эта веб-страница придёт в виде отдельных поддокументов:
- Текст отдельно
- Файлы стилей отдельно
- Скрипты, изображения и видео файлы тоже придут отдельно
- Далее браузер соединит все поддокументы в единый документ, который мы увидим в виде веб-страницы.
HTTPS (HyperText Transfer Protocol Secure) - это расширение протокола http для поддержки шифрования в целях безопасности.
Сейчас огромное количество сайтов используют именно https. Это во многом связанно с безопасностью, ведь не каждый человек захочет рисковать своими данными, так как если вы решите перейти на сайт где нет шифрования, то увидите в левом верхнем углу браузера сообщение о том, что соединение не безопасно. К тому же сайты, которые не имеют https соединения будут находится ниже в поисковой выдаче, что создаст проблем с SEO продвижением.
TCP/IP - Это стек протоколов, который отвечает за доставку сетевых пакетов пользователю, а также гарантирует, что все пакеты будут доставлены.
Протокол IP является сетевым протоколом, про него я уже рассказывал выше в теме IP - адреса. Он отвечает за адресацию пакетов и гарантирует, что все пакеты придут по назначению.
TCP - это протокол транспортного уровня, который базируется на IP для доставки пакетов, но добавляет ещё некоторые вещи, например гарантирует доставку всех сетевых пакетов без потерь. Это именно TCP запрашивает недостающие пакеты в случае их утраты. Когда пакеты доставляются на наше компьютерное устройство TCP проверяет наличие всех пакетов, если пакетов не хватает - TCP запрашивает у сервера недостающие пакеты.
Как данные передаются по сети
Мы поверхностно разобрали принцип работы интернет-сети. Осталось просто подвести итоги и структурировать уже выше полученные знания.
Допустим, нам нужно посетить веб-страницу, давайте снова подробно разберём какие действия происходят в сети.
- Сначала мы открываем браузер и вводим в адресной строке браузера доменное имя сайта
- Браузер начинает искать IP-адрес нужного нам сайта на компьютерном устройстве. Если мы ранее посещали сайт, то IP-адрес может хранится в истории подключений, в кэше роутера или в операционной системе компьютера.
- Если браузер не нашёл IP-адрес сайта - он отправляет запрос на ближайший DNS-сервер. Если ближайший DNS-сервер не находит у себя нужный IP, то запрос переадресовывается на следующий DNS-сервер. И так далее пока не найдётся нужный IP-адрес.
- Когда браузер получает нужный IP-адрес сервера - он пытается установить с ним соединение. Соединение устанавливается по протоколу TCP, хотя может использоваться и другой надёжный транспортный протокол (Например, UDP).
- После того как браузер установит соединение с сервером - он отправляет http запрос на получение данных (например, веб-страница)
- После получения запроса сервер формирует ответ. Собирает данные о веб документе (текстовые файлы, файлы стилей, скрипты, видео-файлы, картинки и прочее). И отправляет данные на наш компьютер.
- Веб-страница разбивается на множество сетевых пакетов и отправляется на наш компьютер по опто-волоконному кабелю, который проложен от сервера до нашего роутера, либо до вышки мобильной связи, а вышка с помощью электромагнитных волн отправляет данные на смартфон, или на USB-модем.
- По пути сетевые пакеты проходят через множество маршрутизаторов - находя самый быстрый путь до адресата. Таким образом в разы повышается эффективность доставки данных на наши компьютерные устройства
- Когда сетевые пакеты достигают нашего компьютера - они собираются в единый документ, и браузер начинает рендерить (рисовать) веб страницу.
- Сначала браузер "отрисовывет" основную структуру веб-страницы - HTML разметку. Потом проверяет все теги и отправляет дополнительные запросы для получения остальных элементов страницы: таблицы стилей, скрипты, картинки и прочие файлы (так как они формируются отдельно). И пока рендеринг страницы не завершён браузер будет продолжать обмениваться данными с сервером.
- И после того как браузер завершит рендеринг - пользователю откроется веб-страница!
Итоги
Из этой статьи мы познакомились с основами компьютерных сетей. Теперь мы знаем как работает интернет и знаем как передаются файлы с одного компьютерного устройства на другое.
На данном этапе обучения этих знаний будет достаточно, но это только вершина айсберга. Мы разобрали основы, не углубляясь в подробности.
В дальнейшем мы ещё вернёмся к этому и изучим более глубоко. Ну а сейчас нам нужно двигаться дальше по FrontEnd разработке и начинать погружаться в сам процесс создания сайтов! Поехали 😉
