Уточните, что происходит, когда браузер вводит URL-адрес

внешний интерфейс браузер
Уточните, что происходит, когда браузер вводит URL-адрес

Общий обзор

В целом его можно разделить на шесть шагов.Конечно, каждый шаг можно развернуть в деталях.Вот обзорная карта:

GitHub

Разрешение доменного имени DNS

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

GitHub

  • корневой DNS-сервер: возвращает IP-адрес DNS-сервера домена верхнего уровня.
  • DNS-сервер домена верхнего уровня: возвращает IP-адрес полномочного DNS-сервера.
  • Авторитетный DNS-сервер: возвращает IP-адрес соответствующего хоста.

Поиск имени домена DNS, между клиентом и браузером, метод запроса между локальным DNS является рекурсивным запросом, метод запроса между локальным сервером DNS и корневым доменом и его поддоменами является итеративным запросом;

Рекурсивный процесс:

GitHub

После того, как клиент введет URL-адрес, будет выполняться рекурсивный процесс поиска, поиск в кеше браузера -> поиск файлов на локальном хосте -> поиск в локальном кеше преобразователя DNS -> поиск локального DNS-сервера, любой шаг в этом процессе по поиску завершится процесс поиска.

Если локальный DNS-сервер не может быть запрошен, запрос выполняется в соответствии с пересылкой, установленной локальным DNS-сервером. Если режим переадресации не используется, итеративный процесс поиска выглядит следующим образом:

GitHub

Комбинированный процесс можно представить схемой:

GitHub
В процессе поиска существуют следующие моменты оптимизации:

  • В DNS существуют многоуровневые кеши, которые по удаленности от браузера бывают следующих типов: кеш браузера, системный кеш, кеш маршрутизатора, кеш сервера IPS, кеш сервера корневых доменных имен, кеш сервера доменных имен верхнего уровня, и основной кеш сервера доменных имен.
  • В процессе сопоставления между доменными именами и IP-адресами приложениям предоставляется возможность выполнять балансировку нагрузки на основе доменных имен, которая может быть простой балансировкой нагрузки или глобальной балансировкой нагрузки на основе адресов и операторов.

установить TCP-соединение

Сначала определите, https ли это, если да, то HTTPS фактически состоит из двух частей: HTTP + SSL/TLS, то есть к HTTP добавляется модуль для обработки зашифрованной информации. Передача информации между сервером и клиентом шифруется TLS, поэтому передаваемые данные являются зашифрованными данными.

Для установления TCP-соединения выполняется трехстороннее рукопожатие.

  1. Первое рукопожатие: установление соединения. Клиент отправляет сегмент запроса на соединение, устанавливает бит SYN в 1 и Sequence Number в x, затем клиент переходит в состояние SYN_SEND и ожидает подтверждения от сервера;

  2. Второе рукопожатие: сервер получает сегмент SYN. Когда сервер получает SYN-сегмент от клиента, ему необходимо подтвердить SYN-сегмент и установить номер подтверждения на x+1 (порядковый номер+1).Порядковый номер равен y; сервер помещает всю вышеуказанную информацию в один сегмент (т. е. сегмент SYN+ACK) и вместе отправляет его клиенту.В это время сервер переходит в состояние SYN_RECV;

  3. Третье рукопожатие: клиент получает от сервера сегмент SYN+ACK. Затем установите номер подтверждения на y + 1 и отправьте сегмент ACK на сервер.После отправки сегмента и клиент, и сервер переходят в состояние ESTABLISHED и завершают трехстороннее рукопожатие TCP.

Процесс рукопожатия SSL

  1. На первом этапе устанавливаются возможности безопасности, включая версию протокола, идентификатор сеанса, криптографический компонент, метод сжатия и начальное случайное число.
  2. Второй этап Сервер отправляет данные обмена ключами сертификата и запрос сертификата, и, наконец, отправляет запрос - сигнал завершения соответствующего этапа
  3. На третьем этапе, если есть сертификат, запрашивающий у клиента отправку этого сертификата, то клиент отправляет данные обмена ключами, а также может отправить сообщение проверки сертификата.
  4. Четвертый этап изменяет криптографические компоненты и завершает протокол рукопожатия.

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

备注

ACK: Этот флаг указывает, что поле ответа является допустимым, то есть указанный выше номер ответа TCP будет включен в пакет данных TCP, существует два значения: 0 и 1. Когда он равен 1, это означает, что Поле ответа допустимо, в противном случае оно равно 0. Протокол TCP предусматривает, что только когда ACK=1 действителен, а также предусматривает, что ACK всех отправленных сообщений после установления соединения должен быть равен 1.

SYN (SYNchronization): используется для синхронизации порядкового номера при установлении соединения. Когда SYN=1 и ACK=0, это указывает, что это сообщение с запросом на соединение. Если другая сторона соглашается установить соединение, она должна установить в ответном сообщении SYN = 1 и ACK = 1. Таким образом, установка SYN в 1 указывает, что это запрос на соединение или сообщение о принятии соединения.

FIN (finis) — это конец, значение терминации, используемое для освобождения соединения. Когда FIN = 1, это указывает на то, что данные отправителя этого сегмента были отправлены, и требуется разорвать соединение.

Отправьте HTTP-запрос, сервер обрабатывает запрос и возвращает результат ответа.

После установления TCP-соединения браузер может отправлять запросы на сервер по протоколу HTTP/HTTPS. Когда сервер получает запрос, он анализирует заголовок запроса. Если в заголовке есть информация, относящаяся к кешу, например if-none-match и if-modified-since, он проверяет, действителен ли кеш. , код состояния 304. Если он недействителен, будет снова возвращен ресурс с кодом состояния 200.

Здесь происходит HTTP-кеширование, которое является обычным тестовым сайтом. Общий процесс показан на рисунке:

GitHub
Процесс, больше контента, вы можете обратиться к этой моей статье«Принципы, связанные с браузером (вопросы для интервью) Подробное резюме 1», я не буду вдаваться в подробности здесь ~

закрыть TCP-соединение

  1. Первый разрыв: хост 1 (может быть клиентом или сервером), установить Sequence Number и Acknowledgment Number и отправить сегмент FIN на хост 2; в это время хост 1 входит в состояние FIN_WAIT_1; это означает, что хост 1 существует нет данных для отправки на хост 2;

  2. Второй разрыв: узел 2 получает сегмент FIN, отправленный узлом 1, и возвращает сегмент ACK узлу 1. Номер подтверждения равен порядковому номеру плюс 1, узел 1 переходит в состояние FIN_WAIT_2, узел 2 сообщает узлу 1 «I». согласиться на «ваш близкий запрос;

  3. Третий разрыв: хост 2 отправляет сегмент FIN хосту 1, запрашивая закрытие соединения, и хост 2 переходит в состояние LAST_ACK;

  4. Четвертый разрыв: хост 1 получает FIN-сегмент, отправленный хостом 2, отправляет ACK-сегмент хосту 2, после чего хост 1 переходит в состояние TIME_WAIT; после того, как хост 2 получает ACK-сегмент от хоста 1, он закрывает соединение; при этом Дело в том, что если узел 1 по-прежнему не получает ответа после ожидания 2MSL, это доказывает, что серверная часть была отключена нормально.Ну, узел 1 также может закрыть соединение.

рендеринг в браузере

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

GitHub

  1. Процесс рендеринга преобразует содержимое HTML в древовидную структуру DOM, которую можно прочитать.
  2. Механизм рендеринга преобразует таблицы стилей CSS в таблицы стилей, понятные браузерам, и вычисляет стили узлов DOM.
  3. Создает дерево макета и вычисляет информацию о макете для элементов.
  4. Разложите дерево компоновки и сгенерируйте иерархическое дерево.
  5. Список отрисовки создается для каждого слоя и передается в поток компоновки. Поток компоновки разбивает слой на плитки и растрирует плитки в растровые изображения.
  6. Поток композиции отправляет команды для рисования плиток процессу браузера. Процесс браузера генерирует страницы в соответствии с инструкциями и отображает их на дисплее.

Построить DOM-дерево

После того, как браузер получит байтовые данные HTML из сети или с жесткого диска, он пройдет через процесс разбора байтов в дерево DOM, сначала преобразует исходные байтовые данные HTML в символы указанной кодировки файла, а затем браузер преобразует его в соответствии со спецификацией HTML.Строки преобразуются в различные теги токенов, такие как html, body и т. д. Наконец, он анализируется в древовидную объектную модель, которая является деревом dom.

GitHub

Конкретные шаги:

  1. Транскодирование (байты -> символы) — чтение полученных двоичных данных HTML и преобразование байтов в строки HTML в соответствии с указанным форматом кодирования.
  2. Токенизация (Символы -> Токены) — анализ HTML, преобразование строк HTML в токены с четкой структурой, каждый токен имеет особое значение и имеет свой собственный набор правил.
  3. Build Nodes (Tokens -> Nodes) — каждый Node добавляет определенное свойство (или средство доступа к свойству), а родитель, дочерний элемент, родственные связи и treeScope узла могут быть определены с помощью указателя (например: treeScope iframe и внешняя страница) treeScope отличается)
  4. Создайте DOM-дерево (Узлы -> DOM-дерево) — самая важная задача — установить родительско-дочерние отношения каждого узла.

расчет стиля

Механизм рендеринга преобразует таблицы стилей CSS в таблицы стилей, понятные браузерам, и вычисляет стили узлов DOM.

Существует три основных источника стилей CSS:通过 link 引用的外部 CSS 文件、style标签内的 CSS、元素的 style 属性内嵌的 CSS。, процесс расчета стиля в основном выглядит следующим образом:

GitHub
Вы можете видеть, что в приведенном выше тексте CSS есть много значений атрибутов, таких как 2em, синий, полужирный, эти типы значений нелегко понять механизму рендеринга, поэтому все значения необходимо быть преобразованы в стандартизированные расчетные значения, которые может легко понять механизм рендеринга.Этот процесс Это стандартизация значений атрибутов. После завершения обработки выполняется наследование и каскадирование стилей.В некоторых статьях этот процесс называется процессом построения CSSOM.

Макет страницы

процесс компоновки, т.е. исключитьscript、metaРавные функциональные, невизуальные узлы исключеныdisplay: noneУзел вычисляет информацию о положении элемента, определяет положение элемента и строит дерево компоновки, содержащее только видимые элементы. Как показано на рисунке:

GitHub
Среди них в этом процессе необходимо обратить внимание на回流和重绘, про перекомпоновку и перерисовку, подробности можно посмотреть в другой моей статье«Принципы, связанные с браузером (вопросы для интервью) Подробное резюме II», я не буду говорить об этом здесь ~

Создать иерархическое дерево

На странице присутствует множество сложных эффектов, таких как сложные 3D-преобразования, прокрутка страницы или сортировка по оси Z с использованием индексации Z и т. д. Для более удобного достижения этих эффектов механизм визуализации также должен создавать специальные слои для конкретные узлы и сгенерировать соответствующее дерево слоев (LayerTree), как показано на рисунке:

GitHub
Если вы знакомы с PS, я думаю, вы легко поймете концепцию слоев, именно эти слои накладываются друг на друга, чтобы сформировать финальное изображение страницы. В своем браузере вы можете открыть «Инструменты разработчика» Chrome и выбрать вкладку «Слои». Механизм рендеринга делит страницу на множество слоев, и эти слои накладываются друг на друга в определенном порядке, чтобы сформировать окончательную страницу.

Не каждый узел дерева компоновки содержит слой, если узел не имеет соответствующего слоя, то узел является подчиненным слою родительского узла. Итак, какие условия должны быть соблюдены, чтобы движок рендеринга создал новый слой для определенного узла? Подробности смотрите в другой моей статье«Принципы, связанные с браузером (вопросы для интервью) Подробное резюме II», я не буду говорить об этом здесь ~

Растрированный

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

GitHub

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

показывать

Наконец, поток композиции отправляет команду рисования плитки процессу браузера. Процесс браузера генерирует страницу в соответствии с инструкцией и отображает ее на дисплее, и процесс рендеринга завершается.

использованная литература

  • Geek Time "Интересный сетевой протокол"
  • Geek Time "Принцип работы и практика браузеров"

Наконец

  • Добро пожаловать, чтобы добавить меня в WeChat (winty230), привлечь вас в техническую группу, долгосрочный обмен и обучение...
  • Добро пожаловать, чтобы обратить внимание на «Front-end Q», серьезно изучить интерфейс и быть профессиональным техническим специалистом...

GitHub