> Что такое event loop в JavaScript и как он работает с микрозадачами и макрозадачами (JavaScript)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: amoCRM, Иннотех, Cyber Interactive, Альфа-банк, YADRO, Garage Eight, Kvando Technologies, циан, Soft_Media_Group, ООО Премиум ИТ Солюшен, VK, Kodix, РСХБ, LeverX, Инити, Aston, Газпромбанк, Домклик, IT-One, Софт Медиа Групп, МТГ Бизнес решения, Библио-Глобус, Rutube, Дом.рф, intelsy, Avito, Сфера, EdenAI, Сбер, Арго, TYMY, 1221 Systems, Исходный Код, Globaldrive, Кэтрид Диджитал, SmartWay, ООО Снэп АйТи

Стек: JavaScript

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

Event Loop - это механизм, который позволяет JavaScript, будучи однопоточным, выполнять асинхронные операции без блокировки основного потока. Он постоянно проверяет, не пуст ли стек вызовов, и если стек пуст, помещает в него задачи из очередей.

Работа с микрозадачами и макрозадачами строится на приоритетах:

Макрозадачи - это setTimeout, setInterval, события DOM, fetch, I/O. Они попадают в очередь макрозадач.
Микрозадачи - это Promise.then/catch/finally, queueMicrotask, MutationObserver. Они попадают в очередь микрозадач.

Порядок выполнения:

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

Пример:

JAVASCRIPT
console.log('1'); // синхронно

setTimeout(() => console.log('2'), 0); // макрозадача

Promise.resolve().then(() => console.log('3')); // микрозадача

console.log('4'); // синхронно

Вывод: 1, 4, 3, 2. Сначала синхронный код (1 и 4), затем микрозадача (3), затем макрозадача (2).

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