Это заключительная часть серии, в которой объясняется, как работает браузер. Другие части вы можете прочитать ниже.

Часть 1:



Как работает браузер — Часть — 1
Что происходит, когда вы вводите google.com в браузере и нажимаете Enter?medium.com



Часть 2:



Как работает браузер — часть 2
Чтобы понять, что такое браузер, нам нужно понять, что такое сервер и как он работает.medium.com



До сих пор мы видели, что браузеру нужен IP-адрес для подключения к веб-сайту. Мы видели, как браузер получает этот IP-адрес. Также мы вкратце увидели, как работает сервер и как он отвечает на входящие запросы от браузера.

В этом посте мы увидим, как браузер анализирует файл HTML и отображает его. Прежде чем мы углубимся в это, давайте разберемся с различными компонентами в браузере.

  1. Пользовательский интерфейс. Сюда входит пользовательский интерфейс, который вы видите в браузере. Меню, адресная строка, кнопка «Назад», панель закладок и т. д.
  2. Бэкенд пользовательского интерфейса: отвечает за отрисовку основных компонентов пользовательского интерфейса, таких как текстовое поле, поле выбора и т. д. Хотя это зависит от операционной системы, другие компоненты могут взаимодействовать с этим уровнем через общий интерфейс.
  3. Движок рендеринга. Отвечает за отображение запрошенного контента. При просмотре веб-сайта механизм рендеринга анализирует HTML, CSS и отображает проанализированное содержимое. Если просматриваемый контент представляет собой PDF или изображение, он использует соответствующий механизм рендеринга.
  4. Браузерный движок. Действует как связующее звено между движком рендеринга и пользовательским интерфейсом.
  5. Сеть: управляет HTTP-запросами. Этот слой отвечает за отправку запроса на найденный IP-адрес.
  6. Интерпретатор JavaScript: анализирует и выполняет код JavaScript.
  7. Хранение данных: отвечает за управление хранилищем в браузере, таким как localStorage, SessionStorage, файлы cookie, IndexedDB.

Когда сервер отправляет HTML-файл, механизм рендеринга в браузере получает его от сетевого уровня. Обратите внимание, что файл будет отправлен в двоичном режиме с 1 и 0. Браузер получает его и проверяет тип файла в заголовках файлов. Если это файл HTML, механизм рендеринга начнет его синтаксический анализ.

Дерево DOM:

Механизм рендеринга браузера начинает анализировать файл сверху вниз. Он читает файл и создает древовидную структуру, называемую объектной моделью документа. Как вы, возможно, знаете, все теги в файле HTML будут иметь отношение родитель-потомок. Поэтому их проще представить в виде древовидной структуры данных.

Например, давайте рассмотрим простой файл HTML

<html>
  <head>
    <title>Sample</title>
  </head>
  <body>
    <p>Sample Text</p>
  </body>
</html>

Это будет проанализировано в дерево, как показано ниже:

Все элементы в HTML будут иметь отношение 1 к 1 в приведенном выше дереве. Теги CSS и Scripts здесь представлены не будут. Ниже мы увидим, как они интерпретируются.

Объектная модель CSS:

Когда механизм рендеринга видит файл CSS, он останавливает построение объекта DOM и сначала загружает файлы CSS. После загрузки файла CSS с помощью сетевого слоя он сразу же начинает его парсить. Подобно дереву DOM, созданному из файла HTML, другое дерево создается из файла CSS. Это дерево называется объектной моделью CSS или деревом CSSOM.

Давайте рассмотрим простой файл CSS

body {
  background: grey;
}
.container {
  margin: 8px
}

Это будет проанализировано в древовидную структуру ниже

Скрипты:

Как и CSS, скрипты также блокируют рендеринг DOM. Всякий раз, когда механизм рендеринга встречает тег script, он прекращает дальнейшую работу и останавливает процесс построения DOM. Если источником сценария является внешний файл, он извлекает файл из сети, анализирует и выполняет его, а затем продолжает работу. По этой причине рекомендуется включать теги скрипта ближе к концу HTML-файла. Это означает, что построение дерева DOM может быть завершено на значительной части до выполнения тегов скрипта.

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

Дерево рендеринга:

Хорошо, теперь у нас есть CSSOM, анализируя файлы CSS и DOM из файлов HTML. Браузер берет эти два дерева и начинает создавать другое дерево, называемое Render Tree. Целью дерева рендеринга является создание визуального представления DOM. Например, некоторые элементы DOM могут не отображаться на странице с использованием стилей CSS. Однако дерево DOM не будет знать об этом, поскольку дерево CSS является отдельным. Структура дерева рендеринга сглаживает эти проблемы и создает дерево, которое можно отображать на экране. Этот процесс также отвечает за вычисление окончательных стилей, примененных к элементу, если элемент имеет несколько стилей.

Макет:

Когда создается дерево рендеринга, оно ничего не знает о позициях элементов. В процессе компоновки вычисляется положение и размер всех элементов. Это рекурсивный процесс, и он начинается с вершины дерева, которая является html элементом. Начальная позиция равна 0,0, и она идет вниз по дереву рендеринга и находит положение каждого элемента.

Рисование:

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

  1. Цвет фона
  2. Фоновая картинка
  3. Граница
  4. Дети элементов
  5. Контур

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

Надеюсь, вы поняли, что происходит под капотом в браузере. Увидимся позже в другом посте. Приятного обучения!