Event Loop: что и в каком порядке появится в консоли?

Event Loop: что и в каком порядке появится в консоли?

• Event Loop — механизм асинхронного управления очередями задач в JS
• Все задачи относятся к двум категориям: микротаски (Promises, process.nextTick) и макротаски (setTimeout, I/O)
• В рамках текущего цикла сначала завершаются все микротаски, после чего запускаются макротаски
• Результат в консоли определяется тем, в каком порядке колбеки попадают в очередь
• Например, первым выводится console.log из синхронной части, затем выполняются микротаски и только потом макротаски
• Такой механизм обеспечивает эффективное оперативное исполнение асинхронного кода
• На практике необходимо учитывать тип задачи и текущую стадию Event Loop, поскольку из-за этого сообщения в консоли могут появляться не в очевидной последовательности

Подробный разбор примера:

console.log('1');              // Синхронно — выводится первым
setTimeout(() => console.log('2'), 0);   // Макротаска — после микротасок
Promise.resolve().then(() => console.log('3')); // Микротаска — после синхронного, перед setTimeout
console.log('4');              // Синхронно — выводится вторым

Результат в консоли:

1
4
3
2

Последовательность выполнения:

• Сначала синхронный код выводит 1 и 4
• После этого обрабатываются микротаски (3)
• В завершение запускаются макротаски (2)

Понимание этой последовательности помогает заранее определить содержимое консоли и корректно разрабатывать асинхронный код.

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

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

Event Loop — механизм JavaScript, также используемый в других средах с циклом событий, например Node.js, который координирует выполнение асинхронного кода. Благодаря ему операции ввода-вывода, таймеры, промисы и коллбэки обрабатываются без блокировки основного потока. Event Loop непрерывно контролирует очередь задач (task queue) и очередь микротасков (microtask queue), выбирая следующую операцию для запуска.

Порядок сообщений в консоли определяется тем, в какой очереди и на каком этапе находится соответствующий код: - Макротаски (task queue) — к ним относятся setTimeout, setInterval и операции I/O. - Микротаски (microtask queue) — это обработчики промисов (Promise.then/catch/finally) и MutationObserver.

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

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

• Вначале выполняется синхронный код, поэтому его console.log появляется в консоли первым.
• Затем обрабатываются все микротаски, включая промисы, и их console.log выводится сразу после синхронных сообщений.
• После этого из очереди запускается одна макротаска, например setTimeout, поэтому её вывод появляется последним.
• В React 18+ и других современных средах порядок и приоритет микротасков могут дополнительно оптимизироваться, однако базовый принцип работы остаётся тем же.

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

Например, для такого кода:

console.log('sync');
setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro'));

консоль покажет:

sync
micro
macro

Знание принципов Event Loop необходимо при отладке асинхронного кода, поиске race conditions и повышении производительности во фронтенде и бекенде (Node.js).