Поиск по сайту Поиск

Что происходит, когда вы вбиваете доменное имя в браузере

Читатели нашего блога очень любят разборы задач с IT-собеседований. Сегодня мы решили рассмотреть еще один популярный кейс и ответить на вопрос «Что происходит, когда вы вбиваете адрес сайта в браузере?».

Пошаговый рассказ о том, что делает браузер, основан на статье «What happens when», опубликованной на Гитхабе. Мы сократили источник, убрав технические сложности, дополнили его примерами из жизни и небольшими схемами, чтобы разобраться смог каждый новичок.

Давайте представим, что вы решили ввести адрес REG.RU в поисковую строку. Что произойдет дальше?

Когда вы нажмете клавишу «R» (первую букву сайта), браузер получит команду и начнет предлагать вам варианты для автоподстановки. Они могут быть разными, например, популярные сайты, начинающиеся с «R» (RUTUBE, Rambler), самые посещаемые вами страницы или сайты из закладок.

Воспользовавшись подсказкой от браузера или напечатав адрес сайта полностью, вы нажимаете на «Enter». А дальше…

Начинается поиск сервера

…немного теории. Чтобы пользователь смог увидеть страницы сайта в любое время дня и ночи из любого уголка света, владелец сайта подключает хостинг. Ведь сайт — это набор файлов, который хранится на сервере.

Как только вы вводите доменное имя, браузер должен узнать, к какому серверу обратиться за данными. 

В мире интернета адрес сайта называется IP-адресом. И «айпи» есть абсолютно у каждого сервера. Например, IP-адрес сервера, на котором расположен домен сайта REG.RU, — 194.58.116.31. Узнать его можно, используя специальные сервисы. У нас тоже есть такой. С его помощью можете «вычислить по айпи» любой сайт. В качестве примера мы покажем, какие IP у домена YANDEX.RU. Спойлер — очень красивые.

Эти числа и точки можно сравнить с геолокацией. Но разве вы ходите в гости к другу или отправляете посылку, используя геолокацию? Гораздо удобнее использовать почтовый адрес. Для этого придумали систему DNS — Domain Name Service.

Если коротко, DNS — это огромная таблица с данными о сайтах, которую можно сравнить с телефонной книгой. Хочешь позвонить Ване → нажми на его профиль в телефонной книге, за которым закреплен номер +7 999 999 99 99. Хочешь попасть на сайт Вани → введи в поисковую строку домен, за которым закреплен IP-адрес 99.99.99.99. 

С теорией разобрались, можем возвращаться к нашему «Что происходит, когда…». Как только браузер отправил запрос, он должен понять, какой именно IP у сервера, на котором хранится сайт.

Где браузер ищет IP-адреса

Сначала браузер смотрит, посещали вы этот сайт раньше или нет. А дальше есть два сценария.

1 вариант. Если посещали, браузер возьмет айпи из истории. На языке наших примеров — если почтальон доставляет вам посылки на дом каждый день, он прекрасно запомнит и дорогу к вашему дому.

2 вариант. Если же вы не посещали сайт, браузер начнет просматривать IP в конфигурационных файлах вашей операционной системы (ОС).

Если в настройках не найдется нужной информации, браузер начнет просматривать недавние адреса уже через ваш роутер.

Если нужной информации не окажется и там, браузер перестанет играть в Шерлока Холмса и отправит запрос на DNS-сервер, на котором 100% есть нужная информация. Кстати, большая часть серверов находится в Северной Америке. Но чтобы вам не приходилось минутами или часами сидеть в ожидании, когда же откроется сайт, по миру сделаны копии DNS. В России, например, копии расположены в:

  • Москве,
  • Санкт-Петербурге,
  • Новосибирске,
  • Ростове-на-Дону,
  • Екатеринбурге.

Итак, браузер (aka грозный школьник из мемов) вычислил сайт по IP. Что же дальше?

Запрос отправляется и обрабатывается на сервере

Дальше браузер отправляет запрос серверу в духе «Привет, я знаю, что на твоем сервере есть файлы сайта REG.RU. Дай, пожалуйста».

Как браузер запрашивает файлы сайта у сервера

Но, даже если сервер знает об IP-адресе сайта, он не спешит передавать ему ценные данные. Чтобы было безопасно и никто не перехватил данные (как сайта, так и пользователя), браузер и сервер договариваются шифровать путь, по которому обмениваются информацией. Возможно это благодаря протоколу HTTPS и SAN или SSL-сертификату. О них подробнее рассказали в этой статье.

Как только все формальности соблюдены, сервер отвечает браузеру «Да, сейчас всё отправлю».

Данные отправляются в браузер 

Согласившись передать данные, сервер обрабатывает и готовит данные к отправке. Для этого он смотрит, какие серверные программы отвечают за нужный сайт и другие составляющие страницы.

На этом шаге отправляется контент для отображения веб-страницы: информация о типе сжатия данных, способах кэширования, файлы cookie, которые нужно записать, и другие данные. 

Чтобы обмен данными был быстрым, используют небольшие пакеты (в пределах 8 КБ). Каждый из пакетов пронумерован. Благодаря этому можно отследить последовательность и объем полученных данных браузером. Если что-то потерялось, браузер говорит серверу: «У меня потерялись пакеты, отправь их еще раз».

Как отправляются пакеты данных

Браузер рендерит страницу

Итак, браузер получил все нужные пакеты. Теперь нужно собрать пазл из разложенного по пакетам контента в единую картинку, чтобы отобразить сайт на экране пользователя. Этот процесс называется рендерингом, рассказываем подробнее.

Когда браузер загружает HTML-код страницы, он строит на основании него объектную модель документа (Document Object Model или сокращенно DOM).

Упрощенно, в процессе рендеринга браузер выполняет два основных шага:

  1. анализирует HTML-документ, чтобы определить то, что в конечном итоге нужно отобразить на странице;
  2. выполняет отрисовку дополнительных элементов: картинок, таблиц, стилей и так далее.

Из всех этих файлов и строится DOM-модель.

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

Когда кажется, что работа завершена, браузер и сервер продолжают взаимодействовать. Например:

  • подгружать страницы, на которые переходят с этого сайта (прием используется для эффекта моментальный загрузки);
  • записывать что-то в cookie; 
  • подгружать видео или музыку;
  • анализировать, что пользователь делает на странице, и собирать эти данные. 

По мере загрузки страницы браузер и сервер продолжают обмениваться между собой информацией, пока не завершится рендеринг — то есть пока каждый файл с сервера полностью не отобразится на загруженной странице.

Удивительно, какое большое количество шагов выполняется всего за пару секунд. 

⌘⌘⌘

Мы же напомним, что время, потраченное пользователем на ожидание открытия сайта прямо влияет число отказов — закрытие сайта. Чем быстрее загружается сайт, тем скорее посетитель может воспользоваться его функциями — написать в поддержку, подписаться на рассылку или приобрести ваш товар. Поэтому, если вы владелец онлайн-проекта, выбирайте для него надежный и быстрый хостинг.

Показатель отказов: что это такое и как его снизить

Каждый владелец бизнеса в онлайне хочет, чтобы его сайт привлекал как можно больше потенциальных клиентов и продавал 24 на 7....
Read More

Нейросеть или художник? Рассказываем, как пользоваться MidJourney

Последние пару месяцев нейросети переживают новую волну популярности. Особенно пестрят красочные работы от MidJourney — нейросети, которая создает изображения по...
Read More

Где создать и вести блог в 2023 году

Несмотря на популярность стримов и коротких видео, ведение блога остается эффективным маркетинговым инструментом, повышающим узнаваемость бренда. Согласно исследованию, компании с...
Read More

Письма Дедушке Морозу от клиентов REG.RU

Привет! Если вы подписаны на наши рассылки, то наверняка видели предновогоднее письмо-антистресс. В нем мы собрали расслабляющие сайты, треки, аффирмации,...
Read More

Магия вне Хогвартса: как развить новую привычку

«Завтра встану на час раньше, начну бегать по утрам, перестану пить много кофе и наконец-то закончу рабочий проект», — наверняка...
Read More

Итоги 2022 года в блоге REG.RU

Итак, 2022 год приближается к финишной прямой. И редакция по сложившейся традиции подводит его итоги. В уходящем году мы написали...
Read More

Качественные ссылки — почему они важны для сайта компании и как их получить

Александр Шестаков, руководитель продукта Links.Sape, рассказывает, какими способами компания может получить качественные входящие ссылки на свой сайт, а также почему...
Read More

Где найти музыку для проекта, чтобы никто не подал на вас в суд

Согласно статистике, видео на главной странице увеличивает дальнейшие переходы на сайт на 80%, и у сайтов с видео на 41%...
Read More

Подборка новых функций сервиса REG.Site

В октябре нашему сервису для создания сайтов исполнилось два года. При этом разработчики регулярно оптимизируют существующий функционал REG.Site и добавляют...
Read More

Что происходит, когда вы вбиваете доменное имя в браузере

Читатели нашего блога очень любят разборы задач с IT-собеседований. Сегодня мы решили рассмотреть еще один популярный кейс и ответить на...
Read More