Вопрос проверяет понимание приоритетов выполнения асинхронных задач в Event Loop.
Microtask и macrotask — это разные очереди задач в Event Loop.
Microtask имеют более высокий приоритет и выполняются раньше.
Macrotask выполняются по одной за итерацию цикла.
Неправильное понимание их порядка часто приводит к неожиданному поведению кода.
Чтобы корректно работать с асинхронным кодом, важно понимать, какие операции попадают в какую очередь.
Microtask — задачи с высоким приоритетом, выполняемые сразу после синхронного кода
Macrotask — задачи с более низким приоритетом, выполняемые по очереди между перерисовками UI
К microtask относятся:
обработчики Promise.then / catch / finally
queueMicrotask
MutationObserver
Promise.resolve().then(() => {
console.log('microtask');
});
К macrotask относятся:
setTimeout
setInterval
обработчики DOM-событий
сетевые и I/O операции
setTimeout(() => {
console.log('macrotask');
}, 0);
Из-за разного приоритета:
microtask могут выполняться раньше ожидаемого
порядок логов может выглядеть «сломано»
UI может долго не обновляться
Microtask выполняются раньше и полностью очищаются перед переходом к macrotask. Это ключевой момент при отладке асинхронного кода.