Как браузер загружает страницу

Сжатое описание работы браузера при загрузке веб-страницы. Информация изложена по порядку. В конце заметки находятся материалы, которые использовались для её написания.

Определение адреса

У DNS сервера запрашивается IP-адрес. Если ранее адрес уже использовался, то он берётся из локального кэша.

nslookup.io

Установка соединения

После получения адреса браузер устанавливает TCP-соединение (TCP handshake) с сервером. Браузер посылает пакет с флагом SYN (SYNchronize), сервер отвечает с флагом SYN-ACK (SYNchronize-ACKnowledgement), браузер отвечает ACK (ACKnowledge). Для TCP-соединения важен порт (80 для http и 443 для https).

Для установки безопасного соединения используется ещё одно рукопожатие - TLS (Transport Layer Security).

Получение данных

После установки соединения с сервером браузер отправляет инициирующий GET запрос. Чаще всего запрашивается HTML файл. Первый полученный пакет обычно содержит 14kb.

Время, когда пользователь нажал на ссылку и момент получения первого HTML пакета называется время до первого байта (Time to First Byte)

Парсинг данных

После получения HTML-файла браузер сразу начинает его парсить. Если в файле будут ошибки (например, незакрытые теги), то парсинг будет происходить медленнее. Во время парсинга данные преобразуются в DOM и CSSOM.

Для оптимизации загрузки ресурсов браузер использует сканер предзагрузки. Сканер заранее запрашивает и получает высокоприоритетные ресурсы (css, js, шрифты) в фоновом режиме.

Неблокирующие ресурсы — ресурсы, на получение которых браузер отправляет запрос, но при этом продолжает обработку (например, изображения).

Если скрипт не содержит атрибуты async или defer, то он считается блокирующим и приостанавливает парсинг HTML. Скачивание стилей не блокирует парсинг HTML, но блокирует выполнение JS, т.к. в JS могут использоваться css-селекторы.

Построение DOM и CSSOM

DOM (Document Object Model) — Описывает содержание документа, начинается с тега html.

  
                html
        _________|__________
       |                    |
      head                 body
  _____|___________      ___|___
 |       |         |    |       |
meta    title   link    H1     img
          |             |
       Главная      Заголовок

CSSOM (CSS Object Model) — Основанное на css-селекторах дерево узлов с родителями, детьми и соседями (DOM для css). Благодаря ему возможны манипуляции с css через js.

Построение AOM

На основе DOM браузер формирует Accessibility Object Model. Содержимое страницы становится доступным для голосовых помощников и скринридеров после построения AOM. Обновление AOM происходит в момент обновления DOM и не может меняться напрямую.

Компиляция JavaScript

После построения CSSOM и окончания загрузки JS-код обрабатывается и исполняется.

Render Tree (Frame tree)

В результате комбинирования DOM и CSSOM создаётся Render Tree. В него попадают только видимые элементы (имеют контент), например, псевдоэлементы с указанным свойством content или/и элементы со свойством visibility: hidden будут включены, но не элементы со свойством display: none.

Layout (Reflow)

Когда Render Tree построено, запускается Layout (в контексте Webkit и Reflow в контексте Gecko). Задача Layout — выяснить где расположить элементы из Render Tree. На этом этапе браузер вычисляет размеры элемента и конвертирует его в прямоугольный контейнер (box). Последующие вычисления позиции и размеров называется Reflow.

What forces layout / reflow

Глобальный Layout — просчитывает всё дерево элементов. Происходит в начале загрузки страницы или при кардинальных изменениях, например, изменение размера экрана или изменение размера шрифта.

Инкрементный Layout — просчитывает часть элементов. Вызывается при точечных изменениях.

Paint

На этом этапе браузер конвертирует каждый box в пиксели на экране. Как и Layout может быть глобальным и инкрементным. Отрисовка начинается с заднего плана и постепенно переходит к переднему:

background-color
background-image
border
children
outline

Момент, когда происходит отрисовка впервые, называется (First Meaningful Paint).

Compositing

Compositing — отрисовка отдельных элементов на разных слоях. Изменения отдельного слоя не затрагивают другие слои. Этот процесс отвечает за корректное отображение слоёв и помогает получить плавную анимацию.

Для вынесения элемента на отдельный слой можно использовать css-свойства:

opacity
transform
will-change