Какие задачи относятся к microtasks, а какие к macrotasks?

Question

Microtasks — это задачи с более высоким приоритетом, которые выполняются сразу после завершения текущего синхронного кода. К ним относятся Promise.then, catch, finally, queueMicrotask, MutationObserver. Macrotasks — это задачи общего планирования, такие как setTimeout, setInterval, setImmediate, обработчики событий и I/O. Event loop всегда сначала выполняет все microtasks, и только потом берёт следующую macrotask.

YeaHub · Accepted Answer

Чтобы понять разницу между microtasks и macrotasks, важно разобраться, как работает event loop.ОпределениеEvent loop — механизм JavaScript, который управляет выполнением синхронного и асинхронного кода, используя очередь задач.Macrotasks (Task queue)К macrotasks относятся:setTimeoutsetIntervalsetImmediate (Node.js)Обработчики DOM-событийI/O операцииsetTimeout(() => {
  console.log("timeout");
}, 0);
Microtasks (Microtask queue)К microtasks относятся:Promise.then / catch / finallyqueueMicrotaskMutationObserverPromise.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
Почему microtasks важныОни гарантируют предсказуемое завершение асинхронных цепочек.Позволяют Promise выполняться раньше таймеров.Используются внутри async/await.ВыводMicrotasks имеют более высокий приоритет и всегда выполняются перед macrotasks, что критично для понимания порядка выполнения асинхронного JavaScript-кода.