Все, кто читает данную статью, делают это с помощью посещения веб-сайта или же через приложение, что по факту является также посещением интернет-ресурса. В этой статье я, автор канала «Блог системного администратора» Игорь Позняев, расскажу вам простыми словами о том, как работает веб-сайт. Уверен, что данная информация будет полезна многим — от молодых людей, которые только хотят стать разработчиками, до пожилых, которым интересна данная тематика.
Любой веб-сайт состоит из серверной и клиентской части. Серверная часть находится на удаленном сервере в сети Интернет, а сам сервер может находиться в любой точке земного шара и даже за ее пределами, например, на искусственном спутнике Земли. Сервер отдает браузеру пользователя код, а сам браузер данный код превращает уже в клиентскую часть. В то, что мы видим и с чем взаимодействуем во время работы с интернет-ресурсом.
Что происходит при посещении веб-сайта?
Допустим, вы ввели адрес сайта в адресную строку браузера, перешли из поисковой системы или через закладки. Далее за работу отвечает браузер. Сперва он сверяется с локальным кэшем DNS-серверов, чтобы найти соответствие. Если соответствия нет, то браузер обращается к удаленному DNS-серверу, чтобы получить IP-адрес сервера, на котором уже расположен сайт. После того как браузер узнал IP-адрес, то он уже обращается непосредственно к удаленному серверу с помощью TCP/IP протокола.
Происходит так называемое трехстороннее «рукопожатие» браузера с сервером. Обозреватель отправляет SYN (синхронизационный) пакет на сервер, а сервер отправляет SYN-ACK (подтверждающий синхронизацию) пакет, подтверждая ответ. Далее браузер отправляет ACK (финальный ответ браузера) пакет, и тем самым весь коннект подтверждается.
Далее все общение удаленного сервера с сайтом и браузера происходит с помощью протокола HTTP. Но сперва браузеру нужно выяснить, использует ли сайт обычное соединение (http) или же есть сертификат шифрования (https, тот самый замочек в браузере). Сервер отправляет свой сертификат безопасности, а браузер проверяет сертификат и генерирует симметричный ключ шифрования и уже отправляет его на сервер зашифрованным.
После всего этого обозреватель формирует HTTP-запрос, который включает в себя множество различных параметров. Например, метод передачи данных (GET, POST), полный URL запрашиваемого сайта, различные заголовки запроса и многое другое. Данный запрос отправляется на сервер, а последний должен подготовить ответ.
Сервер готовит ответ (об этом в подробностях ниже) и присылает браузеру HTTP-запрос, который содержит целый ряд различных параметров. Например, статус-код (404, 200, 202 и т. п.), заголовки и само тело ответа, которое содержит весь нужный код для формирования веб-сайта на клиентской стороне.
Что происходит на сервере?
Сервер — удаленный компьютер, на котором расположены файлы веб-сайта. Любой код сайта можно назвать программой или набором скриптов — весь код написан с помощью какого-то либо языка программирования. Например, PHP, Python, Ruby, Java, C, Node JS и другие.
Сайт может быть написан как на чистом языке программирования, так и использовать фреймворки (конструктор для программиста), которые также написаны на одном из вышеуказанных языков. Есть также готовые «движки» (CMS) для сайтов, например WordPress, Bitrix, UMI CMS, Joomla, Drupal, DLE и многие-многие другие. CMS для веб-сайта бывают как платными, так и бесплатными, в то время как фреймворки для программистов в большинстве случаев бесплатны.
Сервер, получив запрос, обращается к коду сайта, и уже отдача самого контента зависит от кода. Сайт может использовать различные базы данных и сложный код для формирования конкретного ответа. Код ответа формирует CMS сайта, и сервер отправляет ответ в браузер. Успешный ответ, как правило, состоит из HTML-кода, из которого браузер формирует сайт. Также сервер отдает изображения, различные файлы скриптов, каскадных таблиц стилей и тот контент, который запрашивает браузер исходя из структуры сайта для конечной отрисовки.
Что происходит в браузере?
Для того чтобы сформировать веб-сайт, браузеру нужно несколько составляющих частей. Это HTML-код — разметка сайта, по нему браузер понимает, как формировать страницу и какие дополнительные данные запросить у сервера. Каскадные таблицы стилей (CSS) — специальный язык оформления веб-страницы, код JavaScript — самый главный язык программирования браузера, который отвечает за динамическую составляющую сайта.
Примерный ход отображения веб-страницы такой:
- Браузер парсит HTML-код и запрашивает у сервера то, что нужно еще догрузить (CSS, JavaScript, изображения, медиафайлы и прочее);
- Применение таблицы стилей для получения оформления;
- Выполнение JavaScript-кода (также идет проверка на его корректность);
- Создание модели DOM (Document Object Model) — объектная модель для конечного вывода пользователю;
- Само отображение конечного результата.
Например, красивая кнопка не может быть создана без помощи CSS, а процесс ее нажатия, анимация и получение результата без перезагрузки страницы не может проходить без участия JavaScript. Вообще, современный сайт может быть очень сложным и навороченным и для конечной отрисовки требовать значительные ресурсы браузера. Порой многие думают, что у них медленно работает доступ к интернету, но это не всегда так — иногда браузеру просто тяжело «собирать» сайт из составных частей.
Если раньше сайт рендерился только из HTML-кода, стилей CSS и JavaScript, то сейчас браузер отправляет и получает сотни Xhr (XMLHttpRequest) запросов, чтобы собрать веб-страницу целиком, а некоторые части сайта могут догружаться уже после того, как пользователь увидел сайт.
Каждый переход по ссылке на сайте приводит снова к повторению всего процесса — обмен данных с сервером, получение ответа и его обработка.
Какой вывод?
Технологии веб-сайтов развиваются семимильными шагами — этот процесс будет только улучшаться. Появляются новые языки программирования, фреймворки, CMS. Постоянно улучшается и клиентская часть — с помощью веб-сайта можно отобразить в браузере всё что угодно. Например, технология HTML 5 с легкостью заменила сложный и громоздкий флеш — браузер может отрисовывать всё что угодно.
Также стоит понимать, что сайт — это не только то, что показывает браузер. Например, множество приложений для смартфонов по факту являются специальным браузером и формируют у себя обычную веб-страницу. Подавляющее большинство общения браузера и сервера происходит по HTTP-запросам, а вышеуказанные технологии (HTML, CSS, JavaScript) используются сейчас буквально везде.
Например, сейчас уже видна тенденция отказа от классических приложений для компьютера в пользу браузерных. Пройдет время, и с развитием очень скоростного интернета классические программы могут вовсе потерять популярность — уже сейчас есть полноценные графические и видео редакторы в браузере и множество других программ. Ну чего уж лукавить — давно существуют ноутбуки Chromebook, которые заточены в основном только для работы в интернете.
Удаленные сервера будут совершать ресурсоемкие операции и отдавать в браузер конечный результат. Не нужно иметь мощный компьютер — все вычисления будут проходить в облаке. Это будет тогда, когда доступ в сеть у большинства людей планеты будет со скоростью выше 1 Гбит/сек, и это не фантастика, а будущая реальность.
Если есть вопросы — пишите в комментариях 👇
______________________________
Свежие комментарии