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

Эта ста­тья — корот­кий и про­стой пере­вод ста­тьи «What happens when...», опуб­ли­ко­ван­ной на Гит­ха­бе. В ней автор подроб­но рас­ска­зы­ва­ет, что имен­но про­ис­хо­дит внут­ри ком­пью­те­ра, когда мы вво­дим в бра­у­зе­ре адрес сай­та и нажи­ма­ем энтер. Мы убра­ли излиш­ние тех­ни­че­ские подроб­но­сти вро­де IRQ-прерываний и ARP-запросов и доба­ви­ли кар­тин­ки, что­бы было про­ще понять суть.

Начало

Мы вве­ли адрес сай­та — thecode.media — и нажа­ли энтер. Что про­ис­хо­дит дальше?

Поиск сервера в интернете

Каж­дый сайт в сети физи­че­ски хра­нит­ся на каком-то сер­ве­ре. Как толь­ко бра­у­зер от нас полу­чил адрес сай­та, он дол­жен понять, к како­му сер­ве­ру обра­тить­ся за дан­ны­ми. Но то, что мы назы­ва­ем адре­сом, на самом деле не адрес, а домен­ное имя. 

👉 Про­ще гово­ря, когда вы сади­тесь в так­си и гово­ри­те «Мне в „Мегу“», вы назва­ли води­те­лю не адрес, а домен­ное имя. Води­тель уже сам дол­жен знать, где в вашем горо­де «Мега». 

Так вот: теперь зада­ча бра­у­зе­ра — опре­де­лить по домен­но­му име­ни адрес, на кото­рый отправ­лять запрос. В мире интер­не­та этот адрес назы­ва­ет­ся IP-адресом. Он есть у каж­до­го сер­ве­ра и выгля­дит, напри­мер, так:

31:184:208:243

По этим чис­лам ком­пью­те­ры пони­ма­ют, как свя­зать­ся друг с дру­гом и отпра­вить нуж­ные дан­ные. Что­бы понять, какой имен­но IP-адрес у сер­ве­ра с нашим сай­том, бра­у­зер дела­ет так:

  1. Сна­ча­ла смот­рит, посе­ща­ли мы этот сайт рань­ше или нет. Если посе­ща­ли — возь­мёт IP-адрес из исто­рии. Так же, как води­тель, кото­рый тыся­чу раз ездил в «Мегу». 
  2. Если не посе­ща­ли — посмот­рит в кон­фи­гу­ра­ци­он­ных фай­лах опе­ра­ци­он­ной систе­мы. Ино­гда для уско­ре­ния рабо­ты неко­то­рые IP-адреса мож­но про­пи­сать в кон­фи­гу­ра­ции ком­пью­те­ра, что­бы он сра­зу знал, куда обращаться.
  3. Если в настрой­ках тако­го нет, бра­у­зер смот­рит недав­ние адре­са в роу­те­ре, через кото­рый ком­пью­тер под­клю­ча­ет­ся к интернету. 
  4. Если и там нет, то бра­у­зер отправ­ля­ет запрос на DNS-сервер. Там точ­но всё есть, но резуль­тат полу­чит­ся мед­лен­нее, чем в осталь­ных способах.

DNS-сервер — это такая служ­ба в интер­не­те, кото­рая отве­ча­ет всем жела­ю­щим на вопрос «Какой IP у такого-то доме­на?». Таких сер­ве­ров в интер­не­те мно­го, и каж­дый из них зна­ет про свою часть сети. Если у бли­жай­ше­го сер­ве­ра нет запи­сей о нашем домене, то он отве­ча­ет «Я не знаю, спро­си у DNS-сервера покруп­нее, вот его адрес». В ито­ге бра­у­зер най­дёт DNS-сервер, кото­рый зна­ет то, что нам нуж­но, и полу­чит IP-адрес сер­ве­ра с сайтом.

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

Что ещё про­чи­тать на эту тему: 

Про сер­ве­ры и интернет

Что такое домен и как его получить

Как сай­ты и стра­ни­цы хра­нят­ся на сервере

Как устро­ен интер­нет: адреса

Отправка запроса

Бра­у­зер нашёл IP-адрес сер­ве­ра, на кото­ром рас­по­ла­га­ет­ся наш сайт, и отправ­ля­ет по это­му адре­су запрос типа «Я знаю, что у тебя есть вот такой домен. Мне нуж­на вот такая стра­ни­ца с это­го доме­на с такими-то пара­мет­ра­ми. Дай, пожалуйста».

Что­бы всё было без­опас­но и дан­ные никто не пере­хва­тил по пути, бра­у­зер и сер­вер дого­ва­ри­ва­ют­ся шиф­ро­вать все сооб­ще­ния друг дру­гу. Как толь­ко все фор­маль­но­сти соблю­де­ны, сер­вер отве­ча­ет «Да, конеч­но, сей­час всё отправ­лю». Ино­гда в адре­се быва­ют ошиб­ки, и сер­вер не может у себя най­ти нуж­ную стра­ни­цу. Тогда он отве­ча­ет «А у меня нет нуж­ной стра­ни­цы, ничем не могу помочь», и бра­у­зер пока­зы­ва­ет ошибку.

Сервер думает

Когда сер­вер полу­ча­ет запрос от бра­у­зе­ра и с адре­сом всё в поряд­ке, он начи­на­ет гото­вить дан­ные к отправ­ке. Для это­го он смот­рит, какие сер­вер­ные про­грам­мы отве­ча­ют за этот домен, и гово­рит им «Собе­ри­те мне вот эту стра­ни­цу, что­бы я её отпра­вил в бра­у­зер». Напри­мер, на сер­ве­ре может сто­ять Ворд­пресс или PHP-обработчик, кото­рый на лету соби­ра­ет стра­ни­цу из раз­ных фраг­мен­тов кода.

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

Отправка данных в браузер

Как толь­ко сер­вер полу­чил от сво­их внут­рен­них про­грамм всё, что ему нуж­но, он отправ­ля­ет резуль­тат в браузер.

Для это­го он наре­за­ет все дан­ные на мел­кие паке­ты дан­ных по 8 кило­байт, нуме­ру­ет их и отправ­ля­ет бра­у­зе­ру. Так дела­ет­ся для того, что­бы одно­вре­мен­но пере­да­вать мно­го паке­тов — в этом слу­чае загруз­ка идёт быст­рее. Нуме­ра­ция нуж­на для того, что­бы бра­у­зер потом собрал все паке­ты в одно целое и полу­чил исход­ный доку­мент. Если по пути пакет поте­рял­ся, бра­у­зер гово­рит сер­ве­ру «У меня поте­ря­лись такие-то паке­ты, отправь их ещё раз». И так до тех пор, пока бра­у­зер не собе­рёт все пакеты.

Как работает браузер

Браузер думает

Когда все паке­ты собра­ны, бра­у­зер раз­би­ра­ет доку­мент на составляющие:

  • HTML;
  • CSS;
  • JavaScript;
  • про­чий код, кото­рый бра­у­зер может выполнить.

Это нуж­но для того, что­бы бра­у­зер постро­ил DOM-модель стра­ни­цы. Такая модель содержит:

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

На осно­ве DOM-модели бра­у­зер в ито­ге будет рисо­вать стра­ни­цу на экране.

Как работает браузер

Отрисовка страницы

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

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

Всё готово

Когда стра­ни­ца загру­зи­лась и бра­у­зер всё нари­со­вал, мы видим гото­вый резуль­тат. Но даже сей­час бра­у­зер может про­дол­жать рабо­тать над страницей:

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

Текст и иллю­стра­ции:
Миха­ил Полянин

Редак­тор:
Мак­сим Ильяхов

Худож­ник:
Даня Бер­ков­ский

Кор­рек­тор:
Ири­на Михеева

Вёрст­ка:
Мария Дро­но­ва

Соц­се­ти:
Олег Веш­кур­цев