Как microtask queue отличается от task queue в Event Loop JavaScript?

Разница между microtask queue и task queue

• область: асинхронность в Event Loop JavaScript
• microtask queue: очередь высокоприоритетных операций, которая обрабатывается сразу после текущего стека и до рендеринга
• включает: callbacks промисов, MutationObservers
• task queue: очередь задач с более низким приоритетом, обрабатываемых после рендеринга
• включает: setTimeout, setInterval, события I/O
• последовательность: после синхронного кода сначала выполняются microtasks ⬆️, затем задачи из task queue ⬇️
• практическая польза: microtasks ускоряют выполнение важных асинхронных операций, поддерживая отзывчивость интерфейса и корректный порядок исполнения

Такое объяснение демонстрирует глубокое понимание Event Loop и принципов оптимизации асинхронного кода на JavaScript.

Подробный ответ

Основной ответ

Microtask queue и task queue представляют собой две разные очереди, через которые JavaScript event loop планирует асинхронные операции. Главное различие заключается в приоритете: microtasks выполняются сразу после завершения текущего скрипта и до того, как event loop начнёт обрабатывать задачи из task queue (то есть до переключения контекста). Task queue предназначена для более "общих" асинхронных событий, включая setTimeout, setInterval и операции I/O.

Ключевые моменты

• В microtask queue помещаются промисы (Promise.then/catch/finally), process.nextTick (Node.js) и MutationObserver. Эти операции запускаются сразу после окончания текущего синхронного кода, ещё до того, как event loop перейдёт к следующей задаче из task queue.
• В task queue находятся коллбэки setTimeout и setInterval, а также DOM-события, например клики, таймеры и другие события. Когда все microtasks завершены, event loop выбирает следующую задачу из task queue и запускает её.
• Важно учитывать, что новая microtask, добавленная во время выполнения другой microtask, также будет обработана немедленно. Цепочка продолжится, пока очередь microtasks полностью не опустеет, поэтому выполнение последующих задач из task queue может быть заблокировано.

Практический контекст

В веб-разработке это различие обычно проявляется следующим образом: при использовании Promise.resolve().then(...) коллбэк попадает в microtask queue и выполняется раньше, чем, например, код из setTimeout(..., 0), который помещается в task queue. Такой порядок помогает создавать более отзывчивые интерфейсы и корректно управлять асинхронностью в React 18+, Node.js (где event loop работает аналогично) и современных браузерах.