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


64

Что происходит за кулисами, когда мы вводим www.cnn.com в браузере, и как информация отображается на экране?

Техническое объяснение будет высоко ценится.


Большое техническое объяснение можно найти в этой книге: Компьютерные сети: подход сверху вниз, 6-е издание (ссылка: книга ). (стр. 495-500). В них много деталей; начиная с того, что происходит при включении компьютера, до момента, когда веб-сайт отображается в браузере пользователя. Вы можете получить представление о том, что упомянуто в книге в этом наборе слайдов. (Ссылка: слайды с 88 по 95)
ленивцы

Вы можете найти подробную информацию здесь: github.com/vasanthk/how-web-works или там html5rocks.com/en/tutorials/internals/howbrowserswork
mems

Ответы:


134

Браузер: «Хорошо, у меня есть пользователь, запрашивающий этот адрес: www.cnn.com. Я полагаю, что косые черты или что-то в этом роде нет, это прямой запрос главной страницы. Также не было определено ни протокола, ни порта, так что я предполагаю, что это HTTP и идет к порту 80 ... ну, обо всем по порядку. Привет, DNS, приятель, проснись! Где этот www.cnn.com скрывается? "

DNS: «Правильно ... подождите секунду, я спрошу серверы ISP. Хорошо, это выглядит как 157.166.226.25».

Браузер: "Окей. Internet Protocol Suite, ваша очередь! Позвоните 157.166.226.25, пожалуйста. Отправьте им этот заголовок HTTP. Он запрашивает базовую структуру и содержимое их главной страницы, поэтому я знаю, что еще можно извлечь ... о, хорошо, не то, чтобы ты заботился об этом, я думаю.

TCP / IP: «Что значит моя очередь ? Как будто я не просто отрабатывал спину прямо для DNS? Боже, что нужно, чтобы получить здесь немного признательности ...»

Браузер: ...

TCP / IP: "Да, да ... Подключение ... Я просто попрошу шлюз переслать его. Вы знаете, это не так просто, мне придется разделить ваш красивый запрос на несколько частей так что это подходит к концу, и собирать любые вещи, которые они отправляют обратно из всех тысяч пакетов, которые я получаю ... ах, да, вам все равно. Цифры. "

Между тем, в штаб-квартире CNN, сообщение наконец заканчивается в дверях веб-сервера.

Веб-сервер CNN: "Nzhôô! Клиент! Он хочет новости! Главная страница! Как насчет этого?"

Механизм сценариев на стороне сервера CNN: «Правильно, будет делать!

Сервер базы данных CNN: "Да! Работай на меня! Какой контент тебе нужен?"

Механизм сценариев на стороне сервера CNN: "... гм, извините, БД, у меня есть копия первой страницы прямо в моем кэше, не нужно ничего компилировать. Но, эй, возьмите этот идентификатор пользователя и сохраните его, я отправлю его к клиенту тоже, поэтому мы знаем, с кем мы поговорим позже. "

Сервер базы данных CNN: "Да!"

Вернуться на компьютер пользователя ...

TCP / IP: «Оооооо, вот и ответ. О, мальчик, почему у меня такое чувство, что это будет большой ...»

Браузер: «Ух, вау ... здесь есть все виды javascript-кода ... куча изображений, пара форм ... Хорошо, это займет некоторое время для рендеринга. Лучше добраться до него. Эй, система IP, есть еще куча вещей, которые вам нужно получить. Давайте посмотрим, что мне нужно несколько таблиц стилей с i.cdn.turner.com - через HTTP и запросить файл /cnn/.element/css/2.0/common.css. И затем получите некоторые из этих сценариев на i.cdn.turner.com, я считаю до сих пор шесть ... »

TCP / IP: «Я получил картину. Просто дайте мне адреса серверов и все такое. И оберните эти файлы в HTTP-запрос, я не хочу иметь с этим дело».

DNS: «Проверка i.cdn.turner.com ... эй, мелочи, это на самом деле называется cdn.cnn.com.c.footprint.net. IP 4.23.41.126»

Браузер: «Конечно, конечно ... подождите секунду, это займет несколько нсек, я пытаюсь понять весь этот сценарий ...»

TCP / IP: «Эй, вот CSS, который вы просили. О, и ... да, эти дополнительные сценарии также только что вернулись».

Браузер: "Ух ты, есть еще ... какое-то видеообъявление!"

TCP / IP: «О, мальчик, как весело это звучит ...»

Браузер: «Там тоже все виды изображений! И этот CSS выглядит немного мерзко ... верно, поэтому, если эта часть идет туда, и имеет эту строку вверху ... как же это будет больше соответствовать ... нет Мне придется немного растянуть это, чтобы сделать это ... О, но этот другой CSS-файл переопределяет это правило ... Ну, этот не будет легкой частью для рендеринга, это точно! "

TCP / IP: «Хорошо, хорошо, перестань отвлекать меня на секунду, здесь еще много работы».

Браузер: «Пользователь, вот небольшой отчет о проделанной работе. Извините, все это может занять несколько секунд, загружается около 140 различных элементов, и пока идет 16».

Спустя одну или две секунды ...

TCP / IP: «Хорошо, это должно быть все. Эй, слушай ... извини, что я оборвал тебя раньше, ты справляешься с этим? Это, конечно, кажется слишком тяжелым для тебя».

Браузер: «Фу, да, это все эти веб-сайты в наши дни, они, конечно, не облегчают тебе жизнь. Ну, я справлюсь. Это то, ради чего я здесь».

TCP / IP: «Я полагаю, что это довольно тяжело для всех нас в наши дни ... ох, прекратите злорадствовать там, DNS!»

Браузер: «Эй, пользователь! Сайт готов - иди и получай новости!»


17
Вот что делает мой компьютер после наступления темноты.
Фоши

7
Отличное объяснение ... Шляпа снята с тебя ... Бинго ...
Рэйчел

7
Чудесный кусок повествования :)
Майкл Боргвардт

5
@dex: ... и по сей день они по-прежнему набирают силу, разбирая все причудливые запросы пользователя с усердием, достойным похвалы в книгах истории. Но, как и все, однажды настанет их время уйти в отставку, изящно пробиваясь к более современным подходам, подходящим для более современных времен. Но будьте уверены, что они всегда будут там, в нашем наследии, наблюдая с понимающей улыбкой и передавая будущим поколениям все трудные уроки, которые они усвоили в эти яркие времена появляющихся интернет-коммуникаций.
Илари Каясте

3
Ура для скептиков, верно, @wahnfrieden? Я считаю это довольно точным и информативным.
Юрген А. Эрхард


18
  • Браузер разбивает то, что вы вводите (URL) на имя хоста и путь.
  • Браузер формирует HTTP-запрос для запроса данных по указанному имени хоста и пути.
  • Браузер выполняет поиск DNS для преобразования имени хоста в IP-адрес.
  • Браузер формирует TCP / IP-соединение с компьютером, указанным через IP-адрес. (Это соединение на самом деле формируется из множества компьютеров, каждый из которых передает данные следующему.)
  • Браузер отправляет HTTP-запрос по соединению на указанный IP-адрес.
  • Этот компьютер получает HTTP-запрос от соединения TCP / IP и передает его программе веб-сервера.
  • Веб-сервер читает имя хоста и путь и находит или генерирует запрашиваемые вами данные.
  • Веб-сервер генерирует HTTP-ответ, содержащий эти данные.
  • Веб-сервер отправляет этот HTTP-ответ обратно по TCP / IP-соединению на ваш компьютер.
  • Браузер получает HTTP-ответ и разбивает его на заголовки (описывающие данные) и тело (сами данные).
  • Браузер интерпретирует данные, чтобы решить, как отображать их в браузере - обычно это данные HTML, которые определяют типы информации и их общую форму.
  • Некоторые из данных будут метаданными, которые определяют дополнительные ресурсы, которые необходимо загрузить, такие как таблицы стилей для подробной компоновки, встроенные изображения или Flash-фильмы. Эти метаданные снова указываются как URL, и весь этот процесс повторяется для каждого, пока все не будут загружены.

Это хорошо, но, возможно, стоит упомянуть кеширование (в браузере и других местах), прокси, балансировку нагрузки, CDN и т. Д. Я думаю, что все это является важной частью понимания того, как (на земле) занятые сайты обрабатывают миллионы почти одновременных запросов на огромное количество контента.
Сэм Даттон

12

Первым шагом является поиск DNS (сервера доменных имен). Он использует DNS-серверы, указанные в настройках вашей сети (или предоставленные вам DHCP), для поиска верхнего домена (cnn.com), а затем запрашивает у сервера имен этого домена IP-адрес указанного субдомена (www.cnn.com).

Получив IP-адрес, ваш браузер начнет связь с веб-сервером. Это делается с использованием указанного протокола (который обычно по умолчанию HTTP 1.1). На сервер делается запрос «GET» для «/», который отвечает содержимым документа HTML и соответствующими заголовками (которые сообщают браузеру о типе содержимого документа, HTML и другой информации). Затем браузер анализирует документ и находит любые URL-адреса, которые ему нужно встроить в страницу (например, изображения или связанные таблицы стилей), и выполняет GET-запросы для каждого из них.

Браузер также обычно автоматически делает запрос GET для /favicon.ico (чтобы отобразить маленький значок CNN рядом с названием сайта).

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

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


Парень не знает основ, и вы просто взорвали его с помощью DNS, DHCP и IP. Давайте объясним ему структуру IP-пакета!

6
Он попросил технические детали. Он может посмотреть IP, если захочет.

Дело в том, что он, вероятно, не хочет ничего искать ... :(

8

То, что происходит на стороне CNN, так далеко от других ответов.

  • Машина в CNN получает сообщение с вашего компьютера с просьбой предоставить эту страницу.
  • Он перенаправляет этот запрос на один из множества компьютеров, которые CNN использует для своего веб-сайта (причина этого в том, что таким образом вы можете распределить работу по объединению ответных веб-страниц на многих компьютерах)
  • Компьютер CNN получает ваш запрос и отвечает веб-страницей, которая, вероятно, почти полностью рассчитана, но, возможно, он изменит несколько вещей перед отправкой вам (это может быть реклама вверху, возможно, заголовок новостей). Иногда компьютеры собирают страницу из множества мелких компонентов каждый раз, когда получают запрос; не уверен, что делает CNN
  • ответ проходит через сеть к вашему компьютеру, который затем отображает его.
  • ответ не включал изображения: ваш компьютер затем отправляет еще один запрос на изображения, и в основном происходит тот же сценарий.

6

Это, очевидно, не техническое объяснение, но это симпатичная визуальная помощь (от превосходного Vladstudio.com ), которая может быть полезна для некоторых:

Как работает интернет


1

Информация, которую вы только что попросили, может заполнить пару десятков книг. Но вот моя попытка объяснить это: ваш браузер говорит вашей ОС найти IP-адрес cnn.com. Затем ваша ОС запрашивает у DNS-сервера IP-адрес для cnn.com. IP-адрес отправляется брату, который связывается с IP-адресом и запрашивает страницу. Затем cnn.com отправляет вам и html-страницу. Браузеры анализируют HTML и отправляют информацию в средство визуализации HTML. Затем браузер сообщает ОС, что отображать на экране.



1

Вот действительно классное видео от «Sendung mit der Maus» (очень популярное немецкое детское телешоу, в котором рассказывается о технологиях для детей):

Die Sendung mit der Maus - Wie funktioniert das Internet (Как работает Интернет).

Только на немецком, к сожалению, но смешно даже без текста. Мужчины со смешными шлемами играют на IP-пакетах, а данные записываются на бумажные карточки. Классика :-).

Кстати, объяснения на самом деле довольно хороши.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.