Читатели нашего блога очень любят разборы задач с 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).
Упрощенно, в процессе рендеринга браузер выполняет два основных шага:
- анализирует HTML-документ, чтобы определить то, что в конечном итоге нужно отобразить на странице;
- выполняет отрисовку дополнительных элементов: картинок, таблиц, стилей и так далее.
Из всех этих файлов и строится DOM-модель.
Параллельно с этим сайт кешируется — на компьютер пользователя (как правило) сохраняется часть файлов сайта (статичные файлы), чтобы при следующем посещении не загружать их заново и быстрее отобразить пользователю содержимое страницы.
Когда кажется, что работа завершена, браузер и сервер продолжают взаимодействовать. Например:
- подгружать страницы, на которые переходят с этого сайта (прием используется для эффекта моментальный загрузки);
- записывать что-то в cookie;
- подгружать видео или музыку;
- анализировать, что пользователь делает на странице, и собирать эти данные.
По мере загрузки страницы браузер и сервер продолжают обмениваться между собой информацией, пока не завершится рендеринг — то есть пока каждый файл с сервера полностью не отобразится на загруженной странице.
Удивительно, какое большое количество шагов выполняется всего за пару секунд.
Что происходит, когда пользователь набирает в браузере адрес сайта
Простыми словами объясняем, как браузер подключается и общается с сервером.
132 464 просмотров
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.
Источник: vc.ru
Шупарский А.Н. Лабораторная работа №2 по теме Web-браузер. Интернет и его службы
2. Ознакомиться с назначением и возможностями Web — браузера Internet Explorer .
3. Сформировать навыки раб оты с программой Int ernet Explorer .
4. Н а учить проводить поиск и «скачивания » информации в сети.
5. Сформировать навыки раб оты с поисковыми системами.
6. П ол учить основные навыки работы с электронной почтой.
ТРЕ БОВАНИЯ :
1. прочитать лабораторную работу ;
2. име ть личну ю д иске ту разме ром 3,5″ (д юйма) для работы на к омпьюте ре;
3. выпо лнить все у пражне ния и задания лабо раторно й работы;
4. найти и выучить о тветы на кон трольные вопро сы;
5. для пол у чен ия зачета по лабо рато рной рабо т е не обхо димо:
давать че ткие ответы на все ко нтр ольные вопросы;
уме ть выполн ить любое задание из лабораторно й работы по просьбе
пре подавателя.
КРАТКА Я ТЕО РИЯ
Средства просм отра Web- стран иц
До кументы Интер нета , пре дназнач енн ые для ото бражени я в электрон н ой
форме , можн о про см отре ть с по мощью Web — брау зера , устано вле нного на
комп ьютере пользо вателя. Браузер ( brow ser ) — программа для о тображен ия и
работы с гипе ртексто выми доку ментами.
Осно вные фу нкции брау зеро в :
установление связи с Web- сервером , на котором хранится док у мент, и загр у зка все х
компонентов комбинированного доку м ента;
интерпретация тегов языка HTML , форматирование и отображение Web-
страницы в соответствии с в озможн остями компьютера, на котором брау зе р
предоставление сре дс тв для отображения му льтимед ийных и др у гих об ъектов,
входящих в состав
Web- страниц , а также механизма расширения, позволяющего настраив ать
программу на раб оту с новыми типами объектов;
обеспечение автоматиз ации поиска W eb- страниц и упрощение досту па к Web-
предоставление д осту па к встроенным или автономным средствам для работы с
др у гими сл у жбами Интерн ета .
В нас тоящее вре мя существуе т д остато чное количество Web — брау зеров .
Наибо лее изве стными являются Interne t Explorer , N etscape
Navigat or , Opera , No Trax и др .
Осно вные фу нкции про граммы Inter net Explorer :
предоставляет единый метод дос ту па к локальным док у ментам компьютер а и к
информации, доступной в Инт ерне те ;
обеспечивает работу с Wor ld Wide Web ;
предоставляет идентичные средства р аботы с локальными папками комп ьютера и
файловыми архивами FTP ;
д ает досту п к средс твам связи через Интернет .
Су щ еству ют различн ые спо собы запу ска про граммы Internet Explorer :
с помощью значка Internet Ex plorer на Рабочем столе или на Пане ли быстрого
с помощью Главное меню ОС Windows : Пуск → Программ ы → Internet
Открытие и просм отр Web — страниц
Открыт ь Web- стра ницу мо жно:
введ я URL- адpec W eb — с траницы в поле панели Адрес , и щелкну в на
кнопке Переход .
выбра в URL- адpec Web — страницы в раскрывающемся списке панели Адрес , и
щелкнув на кноп ке Перех од .
Открытая We b- ст раница ото бража ется в рабоче й области окна обо зревате ля. П о
умо лчанию воспро изводится все ее содержи мое, включая графическ ие
иллюс трации и вст рое нные му льтимедий ные о бъ екты.
Управле ние про см отро м осуществляе тся при помощ и у правляюще го меню,
пане лей инструме нтов, а также активных элеме нтов, име ющихся в откры том
доку менте, н априме р гиперссылок .
Работа с гип ерссыл ками
Навигаци я по Inter net чаще выпо лняется с по мощью гиперссыло к . При
ото бражени и Web- страницы гип ерссылки вы деляются цвето м (о бычно си ним) и
по дчеркиван ием. При наве ден ии на нее ука зателя мыши о н прини мает фо рму
кисти ру ки с вытяну тым указате льным пальце м, а сама гиперссылка при
соо тветствующе й нас тройке брау зера и зменяе т цвет.
Адре с URL , на который ука зывает сс ылка, отображае тся в строке состояния .
При ще лчке на гиперссылке соо тв етству ющая Web- стран ица загру жается
вме сто текуще й. Е сли гипе рссылка указывае т н а произво льный файл, его
загрузка п роисх одит по прото колу FTP .
Гипе рссылки бывают: текстовые, графическ ие (представле нные р исун к ом) и
изо бражения — карт ы, объе диняющ ие не сколько ссылок в рамка х одного
изо бражения . Для просм отра ссыло к на откры той Web- стран ице удо бно
испо льзовать клавишу TAB . При ее нажатии фокус вво да ( пун ктирная рамка)
пе р еме щается к сле дующей ссылке . Пере йти по ссылке можно , нажав
клавишу ENTER . При таком подх оде после довательно п еребираются тексто вы е
и графиче ские ссылки, а так же о тдельные области и зображен ий — карт.
До полните льные возмо жности испо льзован ия гиперсс ылок предо ставляет их
кон текстное м еню. Чтобы открыть но вую страницу , не закры вая теку щей,
приме няют коман ду Открыть в новом окне . В резу льтате открывае тся но в ое
окн о браузе ра.
Разные операц ии, отно сящиеся к теку щей странице и ее элеме нтам, удо бно
осу ществлять че рез ко нт екстное меню. Так, нап ример, рисунок, и м еющийся на
страниц е, мо жно:
с охранить как файл ( Сохранить рисунок как );
ис пользовать как фоно вый рис унок ( Сделать рис унком рабоче го стола ) или
как активный элемент ( Сохранить как элемент рабочего стола ).
Если ри суно к выпо лняет фун кции графиче ской ссылки, к нему мо жн о
приме нять как коман ды, отно сящие к изображе нию, так и команды ,
отно сящие ся к ссылке .
Приемы управлен ия Interne t Exp lorer
Кно пки пане ли инстру м ен тов:
Назад – в озврат к странице, которая пр осма тривалась некоторое время назад.
Присоединенная к кнопке Назад кнопка раскрывающе гос я списка – возв рат на
несколько страниц назад.
В перед – отмена действий, выполненных при помощ и кнопки Назад .
Остановить – остановка процесс а з агру зки страницы, если заг рузка затян у лас ь
или не требу ется .
Обновить – повторная загрузка Web- с траницы , если е е загрузка была
Домой – за гру зка « дома шней» страницы.
Ко манды меню:
Файл позволяют: создать нов ое окно, сохранить открыты й док умент на своем
компьютере, рас печатать его, включить или выключить режим авто номной ра боты,
а также завершить работу с программой.
Правка позволяют: копиро вать фрагме нты док у мента в б уфер обмена , искать те кст
на Web- странице .
В ид позволяют: включать/выключать отоб ражения служ ебных эле ментов окна
(панелей инстру ментов, д ополнительных па нелей, строки состояния), выбирать
шрифт и кодировку символов.
Избранное позволя ют вес ти с писок регулярно посещаемых с тр аниц и
ос у ществлять быстрый доступ к ним.
Се рвис позволяют выполнять переход к использованию прог рамм для ра б оты с
др у гими сл у жбами Интерн ета , настраивать бра узер.
Настрой ка свойств I nternet E xplore r
Для эффекти вной и комфо ртной работ ы в Ин тернете н ео бходима настройка
браузе ра. Параме тры оп тимальной настрой ки зависят о т многих факто ров:
с войств видеосистемы компьютера;
производ ительности действующего соединения с Интернетом ;
с одержания текущ ег о Web- документа ;
личных предпочтений индивид у альног о пользователя .
Начать нас тройку про граммы Inter net Ex plorer мо жно:
из самой программы Сервис → Свойс т ва обозревателя .
или Панель управлен ия → значок Свойства обозревателя .
Открывше е ся диало говое окно отличае тся только названи ем ( Свойст ва
обозрева теля и С войства: И нтерн ет ).
Окно соде ржит шесть вкладо к для настро йки разных гру пп пара метро в:
1) вк ладка Общие позво ляет:
указать, каку ю страницу использовать в качестве основной;
задать объем д искового пространства для хра нения временны х
файлов Интернета ;
удалить временные файлы;
управлять оформление м отображаемых Web- страниц ;
при помощи кнопки Цвета настраивать цвета;
при помощи кнопки Шрифты настраивать шрифты;
при помощи кнопки Оформление задать принудительное использование
параметров форма тирования: цветов (флажок Не учитывать цвета, указанные
на веб — страницах ), начертаний шрифтов ( Не учитывать шрифты, указанные
на веб — страницах ) и ра зме ров шрифтов ( Не учитывать размеры ш рифтов,
указанные на веб — страницах ).
2) вк ладка Подк лючение по зволяе т:
настраивать свойства соед инения с Internet (доступны те же опера ции, что и
при непосредственном использовании папки Удаленный доступ к сети );
указать, какое именно соединение долж но использоваться при работе брау зе ра;
помощью пе реключателей можно з адать ре жим отказа от автоматического
подключения, стандартный режим подключения при отсу тствии соединения
или режим использования только одного соединения.
3) вк ладка Про граммы по зволяе т выбирать програм мы, исполь зуе мые д ля
работы в Инте рнете . Все виды программ, кроме кален даря (д ля ве дени я
списка дел, встреч, п раздников и проч его), вхо дят неп осредстве нно в
дистри бутивный пак ет Internet Explorer .
4) вк ладка Бе зопасност ь :
предоставляет с редства защиты от потенциально опасного содержимого Web-
документов ;
позволяет у казать Web- узлы , взаимоде йствие с которы ми следу ет считат ь
опасным, и запретить прием с них информации.
5) вк ладка Сод ержание по зволяе т:
управлять использованием эле ктронных сертификатов.
6) вк ладка Допо лните льно позво ляет:
управлять отобра жением мультимедийных объектов;
использовать дополнительные настройки оформления;
управлять режимом по иска Web- страниц , сод ержащих нуж н ую информацию;
соблюдать конфиде нциальность работы с помощью средств шифрования,
использования электронных се ртификатов и своевременного у да ления
временных файлов;
контролировать исполь зование с редств языка Java.
Запись и нформации с Web — ст раниц на диск
Запись с оде ржания все й страницы:
1) Выпо лнить ко манду Фай л → Сохранить как ;
2) В по ле Имя фай ла задать имя;
3) В по ле Тип фай ла выбрать:
Веб — страница, полность – сохран яет страниц у це ликом (автоматически
создается од ноименная папка с фа йлом, в котору ю поме щаются
графические объекты страницы);
Веб — страница, только H TML – сохраняе т текст и форматирование страницы,
для рисунков и др у гих об ъектов указывается только местоположение;
Текстовый файл – сохра няет только н еформа тированный текст;
4) Вы брать вид ко дировки ;
5) Нажа ть кноп ку Сохрани ть .
Запись ф рагме нта страницы:
1) Вы делить фра гмент;
Источник: www.studmed.ru