Как работает Интернет, часть 2: что происходит, когда вы переходите по URL-адресу

Опубликовано: 2016-12-06

В предыдущем посте мы говорили о том, как появился Интернет. В этом посте мы прокатимся и посмотрим, что происходит, когда вы посещаете URL-адрес в своем браузере. Мы также рассмотрим современные технологии, используемые в Интернете, и то, как они сочетаются друг с другом.

Используемые технологии, начиная с момента нажатия кнопки «Ввод» и заканчивая просмотром веб-страницы, многочисленны. В нашем предыдущем посте мы говорили о гипертексте и HTTP, но это было только начало:

Веб-серверы (такие как apache2 и nginx) реализуют протокол HTTP вместе с некоторыми другими функциями, которые позволяют веб-браузерам подключаться, запрашивать и получать веб-данные. HTTP — это канал, по которому сообщения, веб-страницы, изображения и ресурсы «путешествуют» между веб-сервером и браузером.

Современный Интернет довольно требователен, и современные веб-серверы справились с этой задачей. Масштабируемость и безопасность — две основные проблемы современного мира. Современные веб-серверы обладают высокой масштабируемостью (могут обрабатывать более 10 000 одновременных подключений), предоставляют несколько вариантов балансировки нагрузки, поддерживают SSL/TLS и HTTP/2. Ключевым преимуществом HTTP/2 по сравнению с HTTP/1.1, несомненно, является превосходное управление потоковой передачей пакетов. Потоковое видео сегодня широко распространено, и HTTP/1.1 не может адекватно удовлетворить потребности всех современных устройств, пропускной способности сети и количества онлайн-пользователей Интернета.

HTML (язык гипертекстовой разметки) — это язык, который использует теги для представления структурированных гипертекстовых документов, понятных вашему веб-браузеру.

Его новейшее воплощение, HTML5, представило множество языковых улучшений и очисток, но наиболее впечатляющими дополнениями были встроенная поддержка видео и аудио, 2D- и 3D-графика, а также локальное хранилище базы данных. Эти улучшения фактически устарели мультимедийные технологии, такие как Flash и Silverlight.

CSS (каскадные таблицы стилей) — это технология, используемая веб-дизайнерами для упрощения визуальных изменений на многих веб-страницах.

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

Back-end (например, PHP или Java) — это код, смешанный с HTML, который выполняется веб-сервером по завершении вычислений.

В настоящее время все веб-сайты динамичны; это означает, что в браузере больше нет простых файлов .html. Все современные языки с добавлением программных библиотек, называемых веб-фреймворками, можно использовать в качестве серверного решения для веб-сайта. Недавний выпуск PHP 7 и блестящие улучшения производительности и функции, а также HHVM от Facebook подняли весь процесс на новый уровень.

Внешний интерфейс (Javascript) — это код, также смешанный с HTML, но он выполняется локально на вашем компьютере в вашем веб-браузере.

Возможно, самой удивительной и впечатляющей разработкой в современной сети стал Javascript. Он прошел путь от простого младшего брата Java, используемого для создания меню и отображения всплывающих окон, до мощного языка программирования, используемого как на клиенте, так и на сервере. В наши дни он может делать все что угодно в веб-браузере и с большой скоростью. Javascript-движок Google V8 стал крупным технологическим прорывом.

Что происходит, когда вы посещаете URL-адрес

Сеть — это изобилие различных технологий, но есть две концепции, основная функция которых остается неизменной даже сегодня. Веб-браузер и веб-сервер. Они работают на «старой» модели клиент/сервер, которая заключается в следующем: клиент подключается к серверу, используя адрес (IP или имя), и что-то запрашивает. Затем сервер отвечает клиенту и так далее. Клиенты подключаются к серверам, а не наоборот. Хотя современные веб-технологии значительно изменили эту модель, мы будем использовать ее для упрощенного объяснения процесса.

Итак, вы запускаете свой любимый браузер и посещаете веб-страницу. С того момента, как вы нажмете клавишу Enter , и до того момента, когда вы, наконец, увидите отображаемую страницу, происходят следующие вещи:

Сначала ваш браузер вызывает программный модуль DNS-преобразователя, настроенный для вашего компьютера, и запрашивает IP-адрес, соответствующий введенному вами URL-адресу.
DNS (система доменных имен) — это основная интернет-служба, которая сопоставляет имена компьютеров (например, www.pressidium.com ) с IP-адресами. IP-адреса — это то, что компьютеры, подключенные к Интернету, понимают и к чему могут подключаться. Мы рассмотрим, что это такое и как это работает, в нашем следующем посте.
Затем ваш браузер инициирует подключение к этому IP-адресу, используя порт 80 или 443.
IP-адрес обозначает сервер, а номер порта — службу, к которой вы хотите подключиться. Все веб-серверы по умолчанию работают на порту 80, а порт 443 используется для безопасных веб-соединений.
Веб-сервер обрабатывает введенный вами URL-адрес и передает управление серверной части. Внутренний код создает HTML-страницу и передает ее веб-серверу. Затем веб-сервер, наконец, отправляет HTML-страницу в браузер по каналу HTTP.
За те миллисекунды, которые требуются веб-серверу для отправки обратно HTML, происходит много всего. Внутренний код на веб-сайте обычно подключается к базе данных, выполняет запросы, возвращает данные, связывается с другими внутренними службами и, наконец, собирает все в документ HTML. На самом деле вы запрашиваете не отдельный файл, а динамический ресурс. , который генерируется «на лету» с использованием самых разных технологий и компонентов.
Ваш веб-браузер получает HTML-страницу, закрывает соединение с веб-сервером и затем отображает ее на вашем экране. Он выполняет код Javascript, присутствующий в HTML. Современный веб-дизайн следует подходу, называемому адаптивным дизайном. Этот подход использует HTML, CSS и Javascript для динамической адаптации макета веб-страницы в зависимости от того, какое устройство вы используете для просмотра. Это стало очень важным в наши дни с взрывным ростом мобильных и планшетных устройств.

Что дальше?

До сих пор мы вкратце коснулись различных современных веб-технологий и того, что происходит, когда вы переходите по URL-адресу. Несомненно, веб-технологии сложны и многочисленны, и их невозможно описать в одной статье. В этой серии постов мы в основном стремимся дать вам представление об Интернете и Сети «с высоты птичьего полета».
В следующем выпуске этой интересной серии мы познакомимся с другой важной инфраструктурой Интернета — Системой доменных имен. Без него ничего бы не заработало! (по крайней мере, для нас, людей).