Selectel

Что происходит, когда пользователь набирает в браузере адрес сайта

Простыми словами объясняем, как браузер подключается и общается с сервером.

1. Пользователь вводит в браузере адрес сайта

2. Браузер начинает искать сервер

За работу любого сайта обычно отвечает один из миллионов серверов, подключенных к интернету. Адрес сервера — это уникальный набор цифр, который называется IP-адресом. Например, для vc.ru— это сервер 85.119.149.83.

Поэтому первым делом браузеру нужно понять, какой IP-адрес у сервера, на котором находится сайт.

Такая информация хранится в распределенной системе серверов — DNS (Domain Name System). Система работает как общая «контактная книга», хранящаяся на распределенных серверах и устройствах в интернете.

Однако перед тем, как обращаться к DNS, браузер пытается найти запись об IP-адресе сайта в ближайших местах, чтобы сэкономить время:

  • Сначала в своей истории подключений. Если пользователь уже посещал сайт, то в браузере могла сохраниться информация c IP-адресом сервера.
  • В операционной системе. Не обнаружив информации у себя, браузер обращается к операционной системе, которая также могла сохранить у себя DNS-запись. Например, если подключение с сайтом устанавливалось через одно из установленных на компьютере приложений.
  • В кэше роутера, который сохраняет информацию о последних соединениях, совершенных из локальной сети.

3. Браузер отправляет запрос к DNS-серверам

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

Например, если нужно найти IP-адрес сайта mail.vc.ru, браузер спрашивает у ближайшего DNS-сервера «Какой IP-адрес у сайта mail.vc.ru?».

Сервер может ответить: «Я не знаю про mail.vc.ru, но знаю сервер, который отвечает за vc.ru». Запрос переадресовывается дальше, на сервер «выше», пока в итоге один из серверов не найдет ответ об IP-адресе для сайта.

4. Браузер устанавливает соединение с сервером

Как только браузер узнал IP-адрес нужного сервера, он пытается установить с ним соединение. В большинстве случаев для этого используется специальный протокол — TCP.

TCP — это набор правил, который описывает способы соединения между устройствами, форматы отправки запросов, действия в случае потери данных и так далее.

Например, для установки соединения между браузером и сервером в стандарте TCP используется система «трёх рукопожатий». Работает она так:

  • Устройство пользователя отправляет специальный запрос на установку соединения с сервером — называется SYN-пакет.
  • Сервер в ответ отправляет запрос с подтверждением получения SYN-пакета — называется SYN/ACK-пакет.
  • В конце устройство пользователя при получении SYN/ACK-пакета отправляет пакет с подтверждением — ACK-пакет. В этот момент соединение считается установленным.

5. Браузер отправляет HTTP-запрос, чтобы получить контент сайта

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

Задача браузера — как можно подробнее объяснить серверу, какая именно информация ему нужна.

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

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

6. Сервер обрабатывает запрос

Сервер получил запрос от браузера с подробным описанием того, что ему требуется. Теперь ему нужно обработать этот запрос. Этой задачей занимается специальное серверное программное обеспечение — например, nginx или Apache. Чаще всего такие программы принято называть веб-серверами.

Веб-сервер в свою очередь перенаправляет запрос на дальнейшую обработку к программе-обработчику — например, PHP, Ruby или ASP.NET. Программа внимательно изучает содержимое запроса — например, понимает, в каком формате нужно отправить ответ и какие именно файлы нужны. И собирает ответ.

7. Сервер отправляет ответ браузеру

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

👉 Чтобы обмен данными был быстрым, браузер и сервер обмениваются сразу множеством небольших пакетов данных — как правило, в пределах 8 КБ. Все пакеты имеют специальные номера, которые помогают отслеживать последовательность отправки и получения данных.

8. Браузер обрабатывает полученный ответ и «рисует» веб-страницу

Браузер распаковывает полученный ответ и постепенно начинает отображать полученный контент на экране пользователя — этот процесс называется рендерингом.

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

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

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

Если вы соберётесь развить свои навыки и решитесь попробовать сделать собственный сайт, воспользуйтесь промокодом на аренду виртуального сервера Selectel. До конца 2019 года для читателей vc.ru действует промокод VCVSCALE300. Воспользуйтесь им при регистрации, чтобы получить 300 рублей на счёт облачного сервиса Vscale от Selectel.

0
13 комментариев
Популярные
По порядку
Написать комментарий...
Владислав Егоров

Бредовая статья. Приплетены какие-то несущественные, не относящиеся к теме детали типа событий X-сервера и устройство протокола USB. Существенные детали либо изложены бегло, либо не изложены вообще.

Ответить
2
Развернуть ветку
Bogdan Shtepan

Что именно не относится к теме, а что изложено бегло?

Я проходил собеседование в диджитал-агенство в Остине 3 года назад и на финальном этапе CEO попросил меня рассказать, что происходит от момента начала ввода поискового запроса в адресную строку браузера и до момента отображения веб-страницы. Я ему пересказал эту статью на хабре, которую прочитал накануне. CEO и вся команда былы очень удивлены от моего знания деталей на таком «низком» уровнем. Так что говорю из высоты опыта: - статья на вц и рядом не валялась с аналогичной на хабре.

Ответить
1
Развернуть ветку
Artemy Ustimenko

Классика!

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку
RK

И так везде? Даже на Яндекс Браузере? Или только в Сафари?
Кстати, у яндекса еще умная строка поиска есть.

Ответить
–4
Развернуть ветку
Сергей Махленко

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

Ответить
1
Развернуть ветку
Eugene Key

Видимо он просто троллит. На рекламу Селектела ответил рекламой Я. Браузера.

Ответить
1
Развернуть ветку
Sam Beckett

Теперь я понимаю для кого пишутся подобные статьи

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Гала Перидоловна

Все таки стоит уточнить, что есть еще HTTP2 и HTTP3(draft), которые работают несколько иначе. HTTPS это не отдельный протокол, это расширение HTTP с использованием TLS. Наверное было бы полезнее описать работу DH и EDH для того, чтобы людям было понятнее почему не всегда можно расшифровать трафик.

Ответить
1
Развернуть ветку
Eugene Makarov

Пользуйтесь исходным программным обеспечением, никаких сборок!

Ответить
0
Развернуть ветку
Павел П

DNS - DOMAIN NAME SERVICE а не систем

Ответить
0
Развернуть ветку
Hans Schwarzmann

Руководствуясь каким источником вы так решили? DNS - это именно Domain Name System. Не вводите людей в заблуждение

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Читать все 13 комментариев
Я запарился перебирать онлайн-кинотеатры и создал агрегатор «Кино.Вино»

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

Концепт: как выглядели бы логотипы известных компаний в стиле Средневековья Статьи редакции

Burger King, Audi, Twitter, Starbucks и другие.

Инвестиции в IPO: научно доказанный способ зарабатывать 18% в день, или как акулы Уолл-стрит наживаются на Цукербергах

Профильные Телеграм-каналы и брокеры уверяют, что на вложениях в IPO легко получать по 100% годовых, и даже больше. В этой статье я разбираю, почему ученые-финансисты в чем-то склонны с ними согласиться — и кто на самом деле зарабатывает огромные деньги на IPO (спойлер: скорее всего, это будете не вы).

Как и почему люди сбегают с работы в первый день — опыт сообщества vc.ru Статьи редакции

Но иногда работодатели и сами ведут себя некорректно.

Почему отключение SWIFT не разрушит российскую банковскую систему, и чего действительно стоит бояться

С 2014 года мы слышим о возможном отключении России от системы SWIFT. В последние недели эти разговоры все чаще звучат в медиа и серьезно влияют на настроения в банковской среде. CBDO Банка 131 Анна Кузьмина рассказала, почему блокировка SWIFT в России не смертельный сценарий, и какие санкции против банков на самом деле вызывают беспокойство.

Как оценивать дизайн: Метод 3К, ч. 1

Раскладываем процесс оценки разрабатываемого дизайна на систему вопросов.

Московский акселератор – короткий путь к мечте!

У нас отличная новость: стартовала постакселерационная программа для участников треков AI Factory, T&M, Digital health, ArchTech. И он отличается от тех постакселераторов, какие были до этого. Чем? Сейчас расскажем.

«Эталон» требует доплаты в 300 тысяч после оформления ДДУ и выдачи ипотеки из-за ошибки в их калькуляторе

Добрый день!

Возникла неприятная ситуация с застройщиком «Эталон». В ноябре 2021 года было принято решение приобрести квартиру в жилом комплекте от застройщика «Эталон», обратилась напрямую в отдел продаж, без агентов и риэлторов. Процесс выбора несколько затянулся т.к. предложенные изначально варианты не устраивали по планировке или цене, к концу…
«Альфа-Банк» выдает кредиты онлайн-мошенникам без должной идентификации клиентов и отказывается аннулировать договор
ЦБ выступил против предложений Минфина о регулировании криптовалют Статьи редакции

Подход Минфина угрожает появлением «параллельной финансовой системы», считает регулятор.

Как снизить стоимость за установку приложения с помощью тестирования креатива: кейс Joom и Aitarget Tech

Может ли цвет креатива или расположение цены влиять на стоимость установки приложения? Эти и другие гипотезы платформа Aitarget Tech позволяет тестировать для Joom, одного из крупнейших маркетплейсов в Европе и Азии. Делимся результатами тестирования гипотез и рассказываем о подходе, который позволяет автоматизировать процесс.

null