Вопрос проверяет понимание работы event loop, очередей задач и порядка выполнения асинхронного кода.
Microtasks — это задачи с более высоким приоритетом, которые выполняются сразу после завершения текущего синхронного кода. К ним относятся Promise.then, catch, finally, queueMicrotask, MutationObserver. Macrotasks — это задачи общего планирования, такие как setTimeout, setInterval, setImmediate, обработчики событий и I/O. Event loop всегда сначала выполняет все microtasks, и только потом берёт следующую macrotask.
Чтобы понять разницу между microtasks и macrotasks, важно разобраться, как работает event loop.
Event loop — механизм JavaScript, который управляет выполнением синхронного и асинхронного кода, используя очередь задач.
К macrotasks относятся:
setTimeout
setInterval
setImmediate (Node.js)
Обработчики DOM-событий
I/O операции
setTimeout(() => {
console.log("timeout");
}, 0);
К microtasks относятся:
Promise.then / catch / finally
queueMicrotask
MutationObserver
Promise.resolve().then(() => {
console.log("promise");
});
Выполняется весь синхронный код.
Выполняются все microtasks.
Выполняется одна macrotask.
Снова выполняются все microtasks.
Цикл повторяется.
console.log("start");
setTimeout(() => console.log("timeout"));
Promise.resolve().then(() => console.log("promise"));
console.log("end");
Результат:
start
end
promise
timeout
Они гарантируют предсказуемое завершение асинхронных цепочек.
Позволяют Promise выполняться раньше таймеров.
Используются внутри async/await.
Microtasks имеют более высокий приоритет и всегда выполняются перед macrotasks, что критично для понимания порядка выполнения асинхронного JavaScript-кода.