Вопрос проверяет понимание event loop и очередей задач, от которых зависит порядок выполнения кода и отзывчивость интерфейса.
Microtask — это задачи с более высоким приоритетом, которые выполняются сразу после текущего стека вызовов. Macrotask — задачи с обычным приоритетом, которые обрабатываются по очереди между рендерами. Promise и queueMicrotask создают microtask, а setTimeout и события DOM — macrotask. Разница влияет на порядок выполнения и рендер.
Microtask — задача, которая выполняется сразу после завершения текущего синхронного кода.
Macrotask — задача, которая попадает в очередь событий и выполняется в следующем цикле event loop.
Сначала перечислим задачи с высоким приоритетом.
Promise.then / catch / finally
queueMicrotask
MutationObserver
Promise.resolve().then(() => {
console.log("microtask");
});
Теперь задачи с обычным приоритетом.
setTimeout
setInterval
setImmediate (в среде Node.js)
DOM-события (click, scroll)
requestAnimationFrame (особый случай, перед рендером)
setTimeout(() => {
console.log("macrotask");
}, 0);
Общая схема выглядит так:
Выполняется синхронный код
Выполняются все microtask
Выполняется рендер
Выполняется одна macrotask
Microtask имеют приоритет над macrotask
Неправильное использование Promise может “отодвигать” рендер
Это важно при оптимизации UI
Microtask и macrotask — разные очереди с разным приоритетом. Знание API, которые их создают, помогает предсказывать порядок выполнения кода.