Но что на самом деле происходит, когда вы вводите Reddit.com в свой браузер ?

В этой статье я пытаюсь понять, как DNS, браузеры и система в целом работают вместе для выполнения «само собой разумеющейся» задачи, такой как доступ к веб-странице. Почему реддит? потому что мне это нравится. 😃

Предположим, что ничего не кэшируется, включая записи DNS, ресурсы HTTP (файлы HTML, изображения, файлы JS, веб-шрифты и т. д.), и что мы впервые подключаемся к reddit.com. НИЧЕГО не кэшируется.

Статья на удивление длинная, поэтому рекомендую прочитать ее, когда будет свободное время. возможно, в несколько сеансов.

Статья отвечает на многие вопросы, такие как:

Что такое IP-адрес?
Что такое ДНС? Как это работает? А что такое компоненты DNS?
Как работают трехстороннее рукопожатие TCP и TLS?
Что такое HTTP и HTTPS?
Что такое DOM и CSSOM?

Введение

Вы открыли свой любимый браузер, набрали «reddit.com» в адресной строке и нажали Enter.
К сожалению, браузеры, компьютеры и другие устройства обмениваются данными только с помощью IP-адресов.

Что такое IP-адрес?

Каждый компьютер, мобильное устройство или другое устройство, подключенное к Интернету, должно иметь уникальный адрес.
Интернет-адреса имеют форму nnn.nnn.nnn.nnn, где nnn должно быть числом от 0. и 255. Этот адрес известен как «IP-адрес».

Итак, если устройства и сети используют IP-адрес для связи, почему мы используем доменные имена, такие как reddit.com, вместо IP-адреса Reddit, например 192.168.25.140?

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

DNS и как он работает?

Система доменных имен (DNS) преобразует доменные имена в IP-адреса. Представьте DNS в виде телефонной книги, которая указывает каждому доменному имени соответствующий IP-адрес, примерно так:

Имя домена > IP-адрес

google.com -> 195.14.54.20

netflix.com -> 192.154.14.210

Как происходит процесс получения IP-адреса из DNS?

Пользователь вводит «reddit.com» в веб-браузере, и запрос переходит на сетевой уровень браузера.

Браузер не знает IP-адрес reddit.com, поэтому проверяет свой кеш DNS на наличие IP-адреса.
В браузере нет записей для сайта Reddit.
Следующий шаг — сама операционная система; браузер запросит у ОС IP-адрес.
ОС проверит системный файл hosts.
Расположение файла hosts зависит от операционной системы. Типичные места указаны ниже:

Windows 10 - "C:\Windows\System32\drivers\etc\hosts"
Linux - "/etc/hosts"
Mac OS X - "/private/etc/hosts"

The hosts file contains the hostname and the corresponding IP, and it looks something like this:

72.30.35.10 google.com

5. К сожалению, в файле hosts тоже нет IP. Таким образом, ОС проверит локальный кеш DNS системы.

Вот копия моего локального файла кэша DNS.

DNS-кэш ОС также не имеет IP-адреса. Теперь это проблема. Откуда еще мы можем получить IP?

ОС знает ответ; он вызовет сервер, называемый рекурсивным распознавателем (который часто является DNS-сервером вашего интернет-провайдера).
Рекурсивный распознаватель отправляется в путешествие, чтобы найти IP-адрес.

Резолвер сначала проверит, есть ли у него IP-адрес; если нет, он спросит корневой сервер.

Как называется корневой сервер имен? Это сервер на самом верху иерархии DNS, который, по сути, управляет доменными именами для всего Интернета.

2. Корневой сервер имен не хранит IP-адреса; вместо этого он хранит данные TLD (домена верхнего уровня).

Что такое серверы TLD?
Сервер имен TLD отслеживает все доменные имена, имеющие общее расширение домена, например .com.net или любое другое имя, которое следует за последней точкой в URL-адресе. .

3. Поскольку мы запрашиваем IP-адрес reddit.com, корневой сервер ответит распознавателю информацией о TLD «.com».

4. Резолвер пойдет и запросит IP-адрес у сервера TLD. Опять же, сервер TLD не знает IP; вместо этого он ответит данными об «авторитетных DNS-серверах», у которых есть IP-адрес.

Какие авторитетные серверы?
Считайте, что это настоящая телефонная книга, содержащая IP-адрес веб-сайта. Авторитетные серверы имен несут ответственность за предоставление ответов серверам имен рекурсивного распознавателя о том, где можно найти определенные веб-сайты. и поддерживается владельцем веб-сайта или поставщиком услуг хостинга.

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

6. Затем IP-адрес reddit.com возвращается распознавателю с сервера имен. и кэширует результаты для последующих запросов.

7. Затем преобразователь отвечает ОС с результатами и кэширует их.

8. IP-адрес передается в веб-браузер вместе с доменом reddit.com операционной системой.

9. Теперь браузер может установить соединение с reddit.com.

Настроить соединение с сервером.

Как браузер и сервер взаимодействуют друг с другом после получения IP-адреса?

TCP-рукопожатие

Как только IP-адрес известен, браузер устанавливает соединение с сервером через трехстороннее рукопожатие TCP. Этот механизм предназначен для обмена параметрами подключения к сетевому сокету TCP перед передачей данных, часто по протоколу HTTPS.

HTTP/S — это безопасная версия HTTP, который является основным протоколом, используемым для передачи данных между веб-браузером и веб-сайтом. HTTPS шифруется для повышения безопасности передачи данных. Это особенно важно, когда пользователи передают конфиденциальные данные, например, при входе в банковский счет, использовании службы электронной почты и т. д.
Чтобы установить соединение между сервером и браузере, сначала должно произойти трехстороннее рукопожатие TCP.

Технику трехэтапного квитирования TCP часто называют SYN, SYN-ACK и ACK, потому что TCP передает три сообщения для согласования и начала сеанса TCP между двумя компьютерами. Да, это означает еще три сообщения взад и вперед между каждым сервером, и запрос еще не сделан.

TLS-согласование

Для безопасных соединений, установленных через HTTPS, требуется еще одно «рукопожатие». Это рукопожатие, или, скорее, TLS, определяет, какой шифр будет использоваться для шифрования связи, проверяет сервер и устанавливает наличие безопасного соединения перед началом фактической передачи данных. Это требует еще трех обращений к серверу, прежде чем запрос контента будет фактически отправлен.

Итак, вот краткая версия рукопожатий TCP и TLS.

Давайте проверим: что на самом деле происходит с точки зрения сети?

Сначала выполняется DNS-запрос от моего хоста (источника) к моему маршрутизатору (назначения), чтобы получить IP-адрес reddit.com.

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

2. Во-вторых, мы получаем ответ после долгого обхода DNS, о котором говорилось ранее.

Выделенный флаг показывает, что это ответный запрос DNS на более ранний запрос.
IP-адрес reddit.com находится в разделе «Ответ».
Если вы заметили, что ответов четыре, это означает, что на сервере Reddit есть какой-то балансировщик нагрузки. Прочтите мою статью для получения дополнительной информации о балансировщиках нагрузки.

a4rafgehad.ninja
Я инженер-программист и энтузиаст кибербезопасности. Я веду блог о технологиях и время от времени занимаюсь сторонними проектами.a4raf-gehad.netlify.app

Время жизни (TTL): количество секунд, в течение которых эта запись будет оставаться в моей системе, прежде чем запросить новое значение.

3- Трёхстороннее рукопожатие TCP
3.1- SYN: Моя сеть начинает соединение, отправляя пакет TCP SYN на reddit.com. Пакеты содержат случайный порядковый номер, указывающий начало порядкового номера для передачи данных (пример: 1234).

3.2- SYN-ACK: после этого сервер получит пакет и ответит его порядковым номером. Его ответ также включает номер подтверждения, который представляет собой порядковый номер моей сети, увеличенный на 1 (1235).

3.3- ACK: моя сеть отвечает серверу, отправляя номер подтверждения, который в основном представляет собой порядковый номер сервера, увеличенный на 1.

4: рукопожатие TLS
4.1. Client Hello и Server Hello: клиент инициирует рукопожатие, отправляя сообщение «hello» на сервер. В сообщении будет указано, какую версию TLS поддерживает клиент, поддерживаемый шифр и строку случайных байтов, известную как «случайный клиент». Сервер отправляет сообщение, содержащее выбранный сервером шифр и «случайный выбор сервера», еще одну случайную строку байтов, сгенерированную сервером.

Обмен ключами клиента и завершение: клиент проверяет подпись и сертификат перед созданием главного секрета. Сервер отправляет «готовое» сообщение, зашифрованное сеансовым ключом. Рукопожатие завершено, и связь продолжается с использованием сеансовых ключей.

4.3. Данные приложения: теперь сервер отправляет данные, запрошенные пользователем, но в зашифрованном виде.

Как браузеры отображают данные, возвращаемые с сервера?

Наконец, мы получили данные с сайта reddit.com. Я избегаю того факта, что данные зашифрованы, но предполагаю, что данные, которые у нас есть, каким-то волшебным образом расшифрованы (возможно, в будущем я напишу статью о шифровании и расшифровке). Кроме того, ответ так же прост, как следующее:

<!DOCTYPE html>  
<html lang="en-US">  
  <head>  
    <meta charset="UTF-8" />  
    <title>reddit</title>  
link rel="stylesheet" href="styles.css" />  
    <script src="myscript.js"></script>  
  </head>  
  <body>  
    <h1 class="heading">reddit web page</h1>  
    <p>A paragraph with a <a href="https://example.com/about">link</a></p>  
    <div>  
img src="image.jpg" alt="image description" />  
    </div>  
    <script src="anotherscript.js"></script>  
  </body>  
</html>

Чтобы просмотреть ответ, который мы получили от reddit.com, так же, как мы обычно видим его напечатанным на экране,
браузеру необходимо выполнить три основных шага:
1- Парсинг
2- Рендеринг
3- Интерактивность

1: Разбор

1.1 Построение дерева HTML DOM

Первым шагом является обработка и синтаксический анализ HTML, который включает построение дерева HTML DOM.
Построение дерева DOM включает:

Открывающие и закрывающие теги HTML: <div> , </div>
Имя и значение атрибута HTML: <div $attributeName=$value>
Содержимое HTML-тега / дочерний элемент / токен <div> $content </div>

DOM-дерево:

1: описывает содержимое HTML-документа; <HTML> tag является корневым узлом и первым создаваемым узлом.
2: Отражает взаимосвязь и иерархию между различными тегами элементов и вложенными тегами.

Вот скриншот результата анализа HTML DOM для reddit.com.

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

1.2 Построение дерева CSSOM:

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

Браузер потратил 184 мс на анализ CSS и построение дерева CSSOM.

1.3 Сканер предварительной загрузки

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

Пример внешнего ресурса:

<link rel="stylesheet" href="styles.css" />  
<script src="myscript.js"></script>  
<img src="image.jpg" alt="image description" />  
<script src="anotherscript.js"></script>

1.4 JS-компиляция

Пока выполняется синтаксический анализ CSS и создается CSSOM, другие активы, включая файлы JavaScript, загружаются (благодаря сканеру предварительной загрузки). JavaScript интерпретируется, компилируется, анализируется и выполняется.

2: Рендеринг

После создания CSSOM и HTML DOM они объединяются в так называемое «дерево рендеринга», которое используется для построения макета каждого элемент нарисован на экране.

Дерево рендеринга решает, какой узел выводить на экран. Примеры:

Любой узел с атрибутом {display: none}CSS не будет отображаться на экране.
<head> Тег и его дочерние элементы.
<script> Теги также не печатаются на экране.

К каждому узлу применяется свой собственный CSSOM, и дерево рендеринга сопоставляет все элементы с соответствующими стилями, определенными в CSSOM.

2.1 Макет

Это процесс, посредством которого определяются ширина, высота и расположение на экране каждого узла, а также размер и положение каждого объекта на странице. Браузер начинает с корневого узла и проходит его.

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

Фаза макета заняла 161 мс.

2.2 Краска

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

Фаза рисования заняла 49 мс, что очень быстро.

2.3 Композитинг

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

3- Интерактивность

Как только основной поток закончит рисовать страницу, можно подумать, что все готово. Это не обязательно так. Если загрузка включает в себя JavaScript, который был правильно отложен и выполнен только после срабатывания события «onload», основной поток может быть занят и недоступен для прокрутки, касания или других взаимодействий.

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

На все это волшебство браузеру потребовалось 10,22 секунды.

Ссылки:
https://www.cloudflare.com/learning/ssl/what-is-https/
https://hpbn.co/transport-layer-security-tls/< br /> https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/
https://web .dev/howbrowserswork/
https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#parsing