В каком порядке выполняются microtask и macrotask?

Question

Microtask выполняются раньше macrotask. Сначала выполняется весь синхронный код, затем очищается очередь microtask, и только потом берётся следующая macrotask. Promise.then и queueMicrotask относятся к microtask, а setTimeout — к macrotask. Это влияет на порядок выполнения кода и рендеринг. Понимание порядка помогает правильно писать асинхронную логику.

YeaHub · Accepted Answer

Event Loop выполняет задачи не просто “по очереди”, а с приоритетом: microtask имеют более высокий приоритет, чем macrotask.Что относится к microtask и macrotaskMicrotask queuePromise.then / catch / finallyqueueMicrotaskMutationObserverMacrotask queue (task queue)setTimeout / setIntervalсобытия UI (например, click)сетевые события (в упрощённом понимании)postMessage (часто рассматривают как task)Порядок выполненияВ одном “цикле” Event Loop типичный порядок такой:Выполняется весь синхронный код (пока call stack не станет пустым)Затем выполняются все microtask, которые накопилисьЗатем браузер может выполнить рендер (если нужно)Потом берётся следующая macrotask и цикл повторяетсяВажно: microtask выполняются до полного опустошения очереди. Если внутри microtask добавить ещё microtask, они тоже будут выполнены в этом же проходе, прежде чем Event Loop перейдёт к macrotask.Небольшой примерconsole.log('start')

setTimeout(() => console.log('timeout'), 0)

Promise.resolve().then(() => console.log('promise'))

console.log('end')
Ожидаемый порядок:startendpromisetimeoutПрактическое значение во frontendЕсли “перегрузить” microtask (например, цепочками Promise.then), можно:откладывать обработку setTimeoutзадерживать реакцию UIухудшить отзывчивость приложенияВывод:В JavaScript после синхронного кода всегда сначала выполняются microtask, и только потом macrotask — это ключ к пониманию порядка выполнения асинхронности.