В чем разница между Микрозадачей и Макрозадачей в JavaScript?

Микрозадача и макрозадача — две очереди Event Loop с разным приоритетом: микрозадачи (Promise) выполняются все сразу после текущего кода, макрозадачи (setTimeout) — по одной после них.

Микрозадачи

• Источники: Promise.then/catch/finally, await, queueMicrotask, MutationObserver.
• Выполняются все сразу после текущей синхронной задачи, до макрозадач и рендера.

Макрозадачи

• Источники: setTimeout, setInterval, обработчики событий, I/O, setImmediate.
• Выполняются по одной за «тик»; между ними возможен рендеринг.

Порядок в Event Loop

1. Синхронный код.
2. Опустошить ВСЮ очередь микрозадач.
3. (Рендеринг.)
4. Взять ОДНУ макрозадачу.
5. Повторить.

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

Различия

• Приоритет: микрозадачи выше — всегда раньше макрозадач.
• Порядок обработки: микрозадачи — все подряд; макрозадачи — по одной.
• Рендеринг: между макрозадачами возможен, между микрозадачами — нет.

Практика

Бесконечная генерация микрозадач блокирует рендер и макрозадачи.

Коротко для собеседования

Микрозадачи (Promise, await, queueMicrotask) выполняются все сразу после текущего кода и раньше макрозадач; макрозадачи (setTimeout, события, I/O) — по одной. Между макрозадачами возможен рендеринг. Поэтому Promise.then срабатывает раньше setTimeout(…, 0).