(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93790508, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93790508, 'hit', window.location.href);

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

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

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
14 комментариев
Написать комментарий...
Bogdan Shtepan

Очень скомканное описание. Эта тема расскрыта в деталях уже давно здесь: https://habr.com/ru/company/htmlacademy/blog/254825/

Ответить
Развернуть ветку
Владислав Егоров

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

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

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

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

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

Классика!

Ответить
Развернуть ветку
Анон Анонимский

Эта статья будет большой тратой времени, слишком там много ненужных вещей, это все никто не будет выслушивать, собеседование длится 1 час, пол часа, и на это нет времени, им нужно просто видеть, что человек знает такие простейшие вещи, и здесь, на vc, эти простейшие вещи расписаны, если хочется подробнее - можно посмотреть протокол DNS и соединение TCP, HTTP, но, точно не стоит тратить время да статью хабра

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Развернуть ветку
Эдуард Шевелев

Заезженный копипаст  

Ответить
Развернуть ветку
11 комментариев
Раскрывать всегда