Какие очереди в событийном цикле важны на практике и как их применять?

DOM и браузер

В событийном цикле важны две очереди: микрозадач (Promise, queueMicrotask, await) — высокий приоритет, и макрозадач (setTimeout, события, I/O) — по одной после микрозадач.

Две очереди

Очередь микрозадач (высокий приоритет)

Источники: Promise.then/catch/finally, await, queueMicrotask, MutationObserver.
Опустошается целиком после текущей синхронной задачи, до макрозадач и рендера.

Очередь макрозадач

Источники: setTimeout, setInterval, обработчики событий, I/O, setImmediate.
Берётся по одной за цикл; между ними возможен рендеринг.

Порядок обработки

1. Синхронный код (стек).
2. Опустошить ВСЮ очередь микрозадач.
3. (Рендеринг.)
4. Взять ОДНУ макрозадачу.
5. Повторить.

console.log('sync');
setTimeout(() => console.log('macro'), 0);
Promise.resolve().then(() => console.log('micro'));
// sync → micro → macro

Как применять (практика)

Promise/микрозадачи — для действий сразу после текущего кода, до рендера.
setTimeout/макрозадачи — отложить работу, дать браузеру отрисовать между кусками:

// Разбить тяжёлую работу, дать UI "дышать"
setTimeout(processNextChunk, 0);

Избегать бесконечной генерации микрозадач (блокирует рендер и макрозадачи).

Коротко для собеседования

В Event Loop важны две очереди: микрозадач (Promise, await, queueMicrotask — приоритетные, опустошаются целиком после текущего кода) и макрозадач (setTimeout, события, I/O — по одной за цикл). Порядок: синхронный код → все микрозадачи → одна макрозадача → повтор. Промисы — для действий до рендера, setTimeout — чтобы дать UI отрисоваться.