Расскажи, как работают браузеры?

Этот вопрос может попасться на собеседовании Front-End разработчику. Ставьте 🔥, если вам задавали такой вопрос на интервью.

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

1️⃣ Парсинг. Когда Браузер получил первый пакет данных, то он сразу начинает парсинг. Парсинг - Преобразование данных в DOM и CSSOM.

1.1. Построение DOM-дерева. На данном этапе происходит обработка разметки HTML.

Парсер (обработчик) кроме обычных HTML-тегов может наткнуться на неблокирующие ресурсы (например, изображения). В этот момент браузер отправляет запрос на загрузку ресурсов, но сам продолжает обработку.

Важно отменить, что тег script без async или defer - это блокирующий ресурс. Когда парсер встречает блокирующий ресурс, то обработка HTML приостанавливается до завершения загрузки скрипта.

1.2. Построение CSSOM (объектная модель CSS). Браузер считывает каждый набор правил в CSS, создаёт дерево узлов с родителями, детьми и соседями, основываясь на CSS селекторах.

2️⃣ Рендеринг. Он делится на следующие этапы: стилизация, компоновка, отрисовка и композиция.

2.1. Стилизация. На данном этапе идет комбинация DOM и CSSOM в дерево рендеринга (DOM + CSSOM = Render Tree). Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы. Например, <head /> или элементы с display: none не будут включены в Render Tree, так как они не должны быть отрисованы.

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

2.2. Компоновка (layout). На данном шаге вычисляется геометрия каждого узла, то есть ширина, высота и расположение внутри окна браузера.

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

2.3. Отрисовка (Paint). Во время фазы отрисовки браузер преобразует каждое поле, вычисленное на этапе компоновки, в фактические пиксели на экране. Грубо говоря, на данном этапе идет раскрашивание элементов.

Важное уточнение: когда отрисовка происходит 2 или более раз, то этот процесс называется перерисовка (repaint).

2.4. Композиция (необязательный этап). Композиция происходит, когда разделы документа отрисованы на разных слоях. Благодаря тому что элементы расположены на отдельных слоях, reflow и repaint для элементов одного слоя не затрагивают элементы на остальных слоях. Этим самым улучшается производительность отрисовки контента браузером.

Хороший пример композиции - анимация через свойства transform и opacity. Элементы с данными свойствами выносятся на отдельный слой и обрабатываются при помощи GPU (графический процессор). Если основной поток JS заблокируется (например, через бесконечный цикл), то анимация через transform и opacity будет работать и не зависнет на экране, так как она запускается в отдельном потоке. Но вот если написать анимацию через другие свойства (например, left, right, top, bottom), то анимация зависнет, если основной поток JS будет занят другой тяжелой задачей. Визуально это можно посмотреть в данной статье.

P.S. Более подробно углубиться в тему работы браузеров рекомендую через эту статью на MDN.