Что такое Event Loop в JavaScript и как он работает?

Как устроен Event Loop в JavaScript?

• в основе лежит однопоточный цикл обработки задач
• он использует две ключевые очереди: call stack и event queue
• call stack — стек вызовов, в котором исполняется код
• event queue — очередь событий (callback'ов), поступающих от асинхронных операций
• Event Loop проверяет состояние call stack
• когда стек пуст, он извлекает очередную задачу из event queue и помещает её в стек
• благодаря этому код выполняется асинхронно и неблокирующе
• механизм необходим для работы с таймерами, IO, промисами и DOM-событиями в браузере

Подробный ответ

Основной ответ

Event Loop в JavaScript — механизм, благодаря которому однопоточный движок может асинхронно выполнять операции без блокировки. JavaScript работает в однопоточном окружении, например в браузере или Node.js, поэтому event loop отвечает за выполнение кода, обработку событий и асинхронных задач, сохраняя основной поток свободным.

Сначала движок выполняет синхронный код целиком, после чего последовательно обрабатывает задачи из очередей tasks и microtasks. Event Loop непрерывно отслеживает очереди: если в них появляются задачи, он извлекает их и передаёт на выполнение.

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

• Call Stack — стек вызовов, содержащий исполняемый синхронный код. Новые задачи event loop запускает только после его очистки.
• Task Queue (Macro-task queue) — очередь стандартных событий, включая setTimeout, setInterval и I/O. Такие задачи попадают в неё после завершения текущего стека.
• Microtask Queue — очередь задач с более высоким приоритетом: промисы .then(), process.nextTick в Node.js. Микротаски выполняются сразу после освобождения текущего стека и раньше macro-tasks.
• Event Loop циклически проверяет стек, микротаски и обычные таски, благодаря чему асинхронный код обрабатывается плавно.
• I/O-операции и таймеры выполняются в фоне с помощью Web APIs или Node.js C++ API, после чего их callback’и возвращаются в очередь задач.

Практический контекст

Например, в React 18 знание принципов event loop помогает оптимизировать асинхронные эффекты и concurrent rendering. В Node.js этот механизм обеспечивает высокую пропускную способность при параллельной работе с сетью и файлами. Понимание различий между microtasks и macrotasks позволяет предотвращать ошибки, связанные с неожиданным порядком выполнения кода, в частности при использовании промисов и таймеров.