Что хотят услышать интервьюеры:

Ожидают, что будет понимание, из каких частей состоит браузерный движок и как страница проходит путь от HTML и CSS до отображения на экране. Важно уметь объяснить, где участвуют парсинг, построение DOM/CSSOM, layout, paint и compositing, а также чем браузерный движок отличается от JS-движка. Хорошо, если упомянуты сетевой стек и базовые механизмы безопасности.

Определение:

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

Пример использования:

Например, при открытии страницы браузер сначала загружает HTML, затем по мере чтения строит DOM. Параллельно подгружаются CSS и скрипты, после чего движок рассчитывает стили, геометрию элементов, выполняет отрисовку и собирает итоговую картинку на экране.

1. Получен HTML
2. Построен DOM
3. Получены CSS-стили
4. Построен CSSOM
5. Выполнен layout
6. Выполнены paint и compositing
7. Страница показана пользователю

Пояснение кода:

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

Браузер отправляет запрос по сети и получает HTML.
HTML парсится в DOM-дерево.
CSS парсится в дерево стилей.
DOM и стили используются для расчёта layout: где и какого размера будет каждый элемент.
Затем выполняется paint: элементы рисуются в слои или bitmap.
На финальном этапе compositing собирает слои в итоговый кадр.

Ключевые моменты:

Браузерный движок отвечает не только за отрисовку, но и за весь цикл подготовки страницы к показу.
JS-движок отдельно выполняет JavaScript, но тесно взаимодействует с rendering engine через DOM и события.
Любое изменение размеров, шрифтов, отступов или структуры может запускать перерасчёт layout и repaint.
Сетевой слой важен для загрузки HTML, CSS, JS, изображений и шрифтов, а также для кэширования.
Безопасность тоже часть работы браузера: sandbox, same-origin policy, обработка CORS, изоляция процессов.
На собеседовании полезно уметь объяснить разницу между DOM, CSSOM, layout, paint и compositing.

Что вы изучали по работе движка браузера?