Весной стартует сезон найма, успей отхватить свой оффер!

Как работает браузер при вводе запроса и этапы рендера

Этапы работы браузера при вводе запроса и рендеринга страницы

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

Парсинг URL и разрешение домена

  • Парсинг URL: Браузер сначала парсит введённый URL, извлекая из него протокол (например, http:// или https://), домен и путь.

  • Поиск в кэше: Браузер проверяет свой кэш, чтобы узнать, есть ли уже соответствие между доменом и IP-адресом. Если соответствие найдено, он сразу подключается к серверу.

  • Обращение к операционной системе: Если в кэше браузера нет записи, запрос отправляется в операционную систему. ОС проверяет файл hosts, который может содержать статические записи доменов и IP-адресов.

  • Запрос к DNS серверу: Если и в файле hosts нет записи, браузер отправляет запрос на DNS-сервер, чтобы получить соответствие домену. DNS-сервер возвращает IP-адрес, который браузер сохраняет в кэш на определённое время.

Установка соединения через TCP (трехстороннее рукопожатие)

Когда IP-адрес найден, браузер инициирует установление TCP-соединения с сервером. Процесс включает в себя трехстороннее рукопожатие (TCP handshake):

  1. SYN: Клиент отправляет запрос на установление соединения с сервером.
  2. SYN-ACK: Сервер отвечает подтверждением на запрос клиента.
  3. ACK: Клиент подтверждает получение ответа, соединение установлено.

Это согласование позволяет установить параметры соединения, такие как скорость и размер пакетов.

Отправка HTTP-запроса

Когда соединение установлено, браузер отправляет HTTP GET-запрос на сервер для получения запрашиваемого ресурса (обычно HTML-документа).

Получение и парсинг HTML

Когда сервер отправляет HTML-документ в ответ на запрос, браузер начинает его парсить и строить DOM (Document Object Model) дерево — структуру, представляющую HTML-страницу как объектную модель.

Загрузка и парсинг CSS и JS

  • CSS: В процессе парсинга HTML браузер начинает загружать и парсить файлы CSS, создавая CSSOM (CSS Object Model) — модель стилей, которая содержит информацию о том, как стили применяются к элементам на странице.

  • JS: Когда браузер встречает тег <script>, он должен выполнить JavaScript код. Скрипты могут блокировать дальнейший рендеринг страницы, так как они могут изменять DOM или CSSOM, поэтому JavaScript код выполняется синхронно до продолжения рендеринга.

    Важно: Если скрипты добавляются с атрибутом async или defer, они не блокируют рендеринг, так как выполняются после загрузки страницы.

Формирование Render Tree (Дерево рендеринга)

На основе DOM и CSSOM браузер строит render tree — дерево рендеринга, которое описывает, как элементы будут отображаться на экране. Это дерево включает в себя визуальные элементы (например, блоки, изображения, текст), но не включает элементы, которые не отображаются (например, <head>, display: none).

Layout (Позиционирование элементов)

На этом этапе браузер рассчитывает расположение каждого элемента на странице:

  • Браузер вычисляет положение элементов (например, с помощью моделей коробок — box model) и их размеры (ширина, высота).
  • Рассчитываются отступы (margin), границы (border), внутренние отступы (padding), а также позиционирование элементов на странице.

Этап layout необходим для того, чтобы точно определить, где и как должны располагаться элементы на экране.

Painting (Отрисовка)

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

  • Каждый элемент "рисуется" с учётом его стилей, а текст может быть нарисован как отдельные строки или блоки.

Composition (Составление слоёв)

Когда элементы страницы нарисованы, браузер переходит к последнему этапу — composition. Здесь происходит составление слоёв:

  • Браузер группирует элементы в слои (layers), чтобы эффективно обработать их. Эти слои могут быть отрисованы независимо, что позволяет ускорить рендеринг.
  • Важные стили, такие как transform или opacity, могут использоваться для переноса элементов на GPU для дальнейшей обработки, чтобы разгрузить процессор.
  • На этом этапе браузер может оптимизировать рендеринг, отправив слои на видеокарту для отрисовки.

Рекомендация:

Чтобы улучшить производительность рендеринга, минимизируйте блокирующие запросы, используйте асинхронную загрузку скриптов и оптимизируйте CSS.