Ох, раньше я обожал собеседования…🗣

Но после того, как за последний месяц прошел их столько, что уже голова кругом, чувствую, что хватит. Поэтому решил: будет много разборов вопросов с собеседований, но не в формате «вопрос-ответ». Я готовлю небольшие статьи, где в одном тексте отвечаю сразу на 2-3 популярных вопроса.

Например:
✅ Что такое браузерный движок и зачем он нужен?
✅ Какие браузерные движки существуют?
✅ Основные этапы рендеринга страницы?
✅ Как работает JavaScript в браузере?
✅ Какие движки JavaScript существуют?
✅ В чем разница между браузерным движком и JavaScript движком?

В браузере есть два ключевых компонента:
❗️Браузерный движок (Rendering Engine)
❗️Движок JavaScript (JavaScript Engine)

🌐Браузерный движок
«Мозг» браузера, который превращает HTML и CSS в красивую картинку на экране.
Его этапы работы:
🟡Парсинг HTML и CSS (dom и cssom)
🟡Создание рендер-дерева
🟡Компоновка (layout)
🟡Отрисовка (painting)
🟡Выделение слоев (compositing)

Примеры движков:
🟡Blink (Chrome, Edge, Opera, Яндекс.Браузер)
🟡Gecko (Firefox)


📶Движок JavaScript
Отвечает за выполнение JS-кода, включая парсинг и оптимизацию.

Примеры движков:
🔵V8 (Google Chrome, Microsoft Edge)
🔵SpiderMonkey (Mozilla Firefox)
🔵JavaScriptCore (Nitro) (Safari)

Основные этапы работы (на примере V8):
1️⃣ Парсинг: создание AST (Abstract Syntax Tree).
2️⃣ Генерация байт-кода: промежуточное представление, которое проще
интерпретировать.
3️⃣Интерпретация: выполнение байт-кода.
4️⃣ JIT-компиляция: профилирование и компиляция часто вызываемого кода в машинный.

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

Подробнее о том как работает v8 смотрите ➡️ на Хабре.