Трудяга браузер

Что делает браузер, когда мы вводим в командную строку адрес сайта? Браузер должен физически добраться до сайта, который расположен на сервере в отдельной папке. Как это происходит мы и рассмотрим дальше.

Как браузер находит ай-пи адрес?


Когда браузер (Мозила, Интернет эксплоуэр, Гугл Хром, Опера и т.п.) видит в своей адресной строке что-то наподобие rnb-bianka.com, что на самом деле является адресом сайта по современной музыке ритм энд блюз, он определяет ай-пи адрес сервера, на котором этот сайт хранится. Делается это при помощи системы доменных имен, по английски- Domain Name System, и сокращенно- DNS.
По сути Domain Name System это таблица, в которой названиям сайтов соответствуют IP- адреса. Поиск IP- адреса возложен на специальные DNS- сервера.
Самое главное требование к системе доменных имен- это надежность, поэтому данные дублируются. Побочный эффект такой надежности заключается в том, что регистрация доменного имени требует 48 часов и специальной организации- Регистратора. Цепочка доменное имя (домен), соответствующий ему IP- адрес и паспортные данные владельца фиксируются Регистратором.
Например, для сайта о Бьянке домен может быть и rnb-bianka.com и rnb-bianka.net и rnb-bianka.ru, проблема в том, свободно ли доменное имя.

Служба доставки браузера TCP/IP


То, что происходит между браузером и сервером, на котором хранятся сайты, называется службой доставки браузера. У службы доставки есть свое имя: протокол TCP/IP. По протоколу TCP/IP передаются данные в виде пакетов HTTP.

HTTP пакет


Рассмотрим что такое HTTP пакет, представив его в виде конверта и его содержимого. Адрес получателя на якобы конверте будет называться HTTP запрос. И на запрос будет получен HTTP ответ в виде адреса отправителя на якобы конверте.

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

Вот как формируется HTTP ответ. По аналогии с адресом отправителя в первой строчке будет версия HTTP, в данном случае HTTP/1.1. В этой же строчке будет статус страницы: здесь он 200 ок, а в случае, когда страница не будет найдена, то статус будет 404. Так что статусов может быть много и разных.

Во второй строчке будет указан Content-Type: вид контента. В данном случае это текст НТМL в кодировке utf-8, самой современной на сегодняшний день. А для картинок, видео и аудио будет другое содержание.
В следующих строчках сервер немного рассказывает о себе, в данном конкретном случае то, что он использует программу веб-сервер nginx.

А внутри конверта будет находится сама страница в виде НТМL текста.

Как увидеть HTTP запросы на своем сайте?

Посмотрим на реальные HTTP запросы, для этого откроем главную страницу сайта rnb-bianka.com и в любом месте страницы щелкнем правой кнопкой мыши для вызова контекстного меню. Из контекстного меню нас будет интересовать пункт «исследовать элемент» и далее «сеть». И тогда мы увидим все HTTP запросы для данной страницы.

Браузер анализирует НТМL код этой страницы, а потом определяет какие еще ему нужны ресурсы и потом делает запросы на: стили, картинки, скрипты. Загрузка происходит пакетами, потому что у браузера есть ограничения на одновременную загрузку с одного адреса. Поэтому картинки, которые хранятся на 50 разных серверах придут быстрее, чем те, что сосредоточены на одном.
Для данной страницы достаточно было 9 запросов по которым была передана информация весом в 0,6 мегабайт меньше, чем за 1 сек. Хорошим временем загрузки считается 1 сек. Оптимизаторы занимаются уменьшением времени загрузки страниц и уменьшением количества запросов.
Таким образом, браузер получает три части: НТМL-код,отвечающий за компоновку, CSS код, отвечающий за стиль, и медиа. Как по этим компонентам собрать целое браузер знает, потому что внутри него есть инструкция, согласно которой он понимает и НТМL и CSS и JavaScript.

В целом процесс выглядит, как обмен HTTP и HTTPS запросами между клиентом и сервером. Клиент это браузер, понимающий НТМL, CSS и JavaScript. С ним взаимодействует сервер, внутри которого действует программы «веб-сервер» в виде Apache и nginx, формирующие для браузера веб страницы при помощи серверных языков: PHP, Ruby, Java, C, Python, Perl.


Leave a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Загрузка...
Menu Title