Читатели нашего блога очень любят разборы задач с 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 у сервера, на котором хранится сайт.
Сначала браузер смотрит, посещали вы этот сайт раньше или нет. А дальше есть два сценария.
1 вариант. Если посещали, браузер возьмет айпи из истории. На языке наших примеров — если почтальон доставляет вам посылки на дом каждый день, он прекрасно запомнит и дорогу к вашему дому.
2 вариант. Если же вы не посещали сайт, браузер начнет просматривать IP в конфигурационных файлах вашей операционной системы (ОС).
Если в настройках не найдется нужной информации, браузер начнет просматривать недавние адреса уже через ваш роутер.
Если нужной информации не окажется и там, браузер перестанет играть в Шерлока Холмса и отправит запрос на DNS-сервер, на котором 100% есть нужная информация. Кстати, большая часть серверов находится в Северной Америке. Но чтобы вам не приходилось минутами или часами сидеть в ожидании, когда же откроется сайт, по миру сделаны копии DNS. В России, например, копии расположены в:
Итак, браузер (aka грозный школьник из мемов) вычислил сайт по IP. Что же дальше?
Дальше браузер отправляет запрос серверу в духе «Привет, я знаю, что на твоем сервере есть файлы сайта REG.RU. Дай, пожалуйста».
Но, даже если сервер знает об IP-адресе сайта, он не спешит передавать ему ценные данные. Чтобы было безопасно и никто не перехватил данные (как сайта, так и пользователя), браузер и сервер договариваются шифровать путь, по которому обмениваются информацией. Возможно это благодаря протоколу HTTPS и SAN или SSL-сертификату. О них подробнее рассказали в этой статье.
Как только все формальности соблюдены, сервер отвечает браузеру «Да, сейчас всё отправлю».
Согласившись передать данные, сервер обрабатывает и готовит данные к отправке. Для этого он смотрит, какие серверные программы отвечают за нужный сайт и другие составляющие страницы.
На этом шаге отправляется контент для отображения веб-страницы: информация о типе сжатия данных, способах кэширования, файлы cookie, которые нужно записать, и другие данные.
Чтобы обмен данными был быстрым, используют небольшие пакеты (в пределах 8 КБ). Каждый из пакетов пронумерован. Благодаря этому можно отследить последовательность и объем полученных данных браузером. Если что-то потерялось, браузер говорит серверу: «У меня потерялись пакеты, отправь их еще раз».
Итак, браузер получил все нужные пакеты. Теперь нужно собрать пазл из разложенного по пакетам контента в единую картинку, чтобы отобразить сайт на экране пользователя. Этот процесс называется рендерингом, рассказываем подробнее.
Когда браузер загружает HTML-код страницы, он строит на основании него объектную модель документа (Document Object Model или сокращенно DOM).
Упрощенно, в процессе рендеринга браузер выполняет два основных шага:
Из всех этих файлов и строится DOM-модель.
Параллельно с этим сайт кешируется — на компьютер пользователя (как правило) сохраняется часть файлов сайта (статичные файлы), чтобы при следующем посещении не загружать их заново и быстрее отобразить пользователю содержимое страницы.
Когда кажется, что работа завершена, браузер и сервер продолжают взаимодействовать. Например:
По мере загрузки страницы браузер и сервер продолжают обмениваться между собой информацией, пока не завершится рендеринг — то есть пока каждый файл с сервера полностью не отобразится на загруженной странице.
Удивительно, какое большое количество шагов выполняется всего за пару секунд.
⌘⌘⌘
Мы же напомним, что время, потраченное пользователем на ожидание открытия сайта прямо влияет число отказов — закрытие сайта. Чем быстрее загружается сайт, тем скорее посетитель может воспользоваться его функциями — написать в поддержку, подписаться на рассылку или приобрести ваш товар. Поэтому, если вы владелец онлайн-проекта, выбирайте для него надежный и быстрый хостинг.
Что такое корнер в торговле и бизнесе, зачем он нужен бренду, чем отличается от островка…
Что такое НТО, чем нестационарная торговая точка отличается от стационарной, какие требования действуют, где можно…
Разбираем, что такое контракт, чем он отличается от договора, в каких случаях его заключают и…
Рассказываем, что такое рынок простыми словами: разбор определения, видов рынка и принципов его работы. Понятные…
Разбираемся, как рассчитывается индекс RTS, что он показывает и чем отличается от индекса МосБиржи. (далее…)
Разбираем, как рассчитывается стоимость инвестиционного пая, что он означает и как инвестор получает доход. (далее…)