Что такое Event Loop?

JavaScript выполняет ваш код в Call Stack. Пока стек занят, новая работа не стартует. Поэтому обычный синхронный код всегда идет первым, даже если рядом уже запланированы таймеры, промисы или обработчики событий.

Асинхронность появляется не потому, что JavaScript внезапно стал многопоточным. Браузер или другая среда выполнения берет на себя ожидание таймера, сети, клика или другого события. Когда результат готов, соответствующий колбэк планируется в очередь, а Event Loop решает, когда его можно выполнить.

Короткая формулировка для интервью:

Event Loop следит за тем, когда Call Stack свободен, и переносит в выполнение запланированные задачи. При этом микротаски после текущего кода выполняются раньше следующей обычной задачи.

Для большинства frontend-задач полезна такая модель:

1. Выполняется текущий синхронный код в Call Stack.
2. После завершения текущей задачи очищается очередь микротасок.
3. Если нужно и есть возможность, браузер может обновить rendering.
4. Event Loop берет следующую задачу, например таймер, пользовательское событие или продолжение сетевой операции.
5. Цикл повторяется.

Важно не превращать это в слишком грубое правило. Браузерная спецификация сложнее, а rendering зависит от состояния страницы и кадра. Но для ответа на интервью достаточно показать главный принцип: микротаски идут до следующей задачи, а основной поток должен освобождаться.

Этот пример часто дают, чтобы проверить, понимаете ли вы разницу между синхронным кодом, микротасками и задачами.

console.log("start");

setTimeout(() => {
  console.log("timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("promise");
});

console.log("end");

Вывод будет таким:

start
end
promise
timeout

start и end выводятся синхронно. Колбэк then попадает в микротаски. Колбэк setTimeout попадает в очередь задач. После освобождения стека сначала выполняется микротаска, и только потом таймер.

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

Плохой пример:

function loop() {
  queueMicrotask(loop);
}

loop();

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

В браузере вы обычно говорите про Call Stack, Web APIs, очередь задач, микротаски и rendering. Этого достаточно для frontend-разработчика, если вопрос не уходит в серверный JavaScript.

В Node.js принцип Event Loop похож, но реализация другая. Там есть фазы libuv, например timers, poll, check и close callbacks. Также есть process.nextTick, который не стоит автоматически переносить в браузерную модель. Сильная формулировка звучит так: общий принцип один, но детали планирования зависят от среды выполнения.

Держите ответ коротким и проверяемым. Сначала дайте модель, затем порядок очередей, затем практический риск.

Пример ответа:

Event Loop это механизм, который позволяет JavaScript обрабатывать асинхронные события в одном основном потоке. Синхронный код выполняется в Call Stack. Когда стек пустеет, сначала выполняются микротаски, например обработчики Promise, затем берутся обычные задачи вроде таймеров и событий. Поэтому setTimeout с задержкой 0 не выполняется сразу, а тяжелый синхронный код блокирует интерфейс и отрисовку.

Если хотите усилить ответ, добавьте пример с Promise.then и setTimeout. Не уходите сразу в детали всех фаз Node.js, если вас спрашивают про браузер и frontend.