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

Код задачи

Рассмотрим запуск этого фрагмента как одного скрипта в браузере:

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

Почему сообщения появляются в таком порядке

1. Текущий скрипт выполняется до конца. Первый console.log выводит 1. Вызов setTimeout регистрирует таймер, но не запускает его колбэк. Промис уже выполнен, поэтому .then ставит обработчик в очередь микрозадач. Последняя строка выводит 4.
2. На контрольной точке обрабатываются микрозадачи. После завершения скрипта стек вызовов пуст. Выполняется обработчик .then, и в консоль попадает 3.
3. Затем может выполниться задача таймера. Её колбэк выводит 2. Он не прерывает ни текущий скрипт, ни обработку очереди микрозадач.

Что важно не перепутать

• В браузере обработчики промисов, queueMicrotask и доставка уведомлений MutationObserver используют микрозадачи. Колбэк setTimeout выполняется как отдельная задача, которую часто называют макрозадачей.
• На контрольной точке очередь микрозадач обрабатывается до опустошения, включая добавленные в процессе микрозадачи. Бесконечная цепочка может задерживать таймеры и отрисовку.
• Задержка 0 не гарантирует запуск ровно через ноль миллисекунд: таймер ожидает возможности выполнения.

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

Источники

• MDN: задачи и микрозадачи
• HTML Standard: обработка цикла событий