Как отработает очередь из микро и макротасков?

Очередь из микро- и макротасков обрабатывается так: после синхронного кода опустошается ВСЯ очередь микрозадач, затем берётся ОДНА макрозадача, и снова все микрозадачи — по кругу.

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

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

Пример

console.log('1');                              // sync

setTimeout(() => console.log('2'), 0);         // macro

Promise.resolve().then(() => {
  console.log('3');                            // micro
  Promise.resolve().then(() => console.log('4')); // micro (добавлена в ходе)
});

console.log('5');                              // sync

// Порядок: 1, 5, 3, 4, 2

Разбор:

1. Синхронно: 1, 5.
2. Микрозадачи (все, включая добавленную): 3, 4.
3. Макрозадача: 2.

Правила

• Микрозадачи опустошаются целиком — все подряд, включая созданные во время обработки, до следующей макрозадачи.
• Макрозадачи — по одной за цикл.
• Между макрозадачами — возможен рендеринг.
• Микрозадачи приоритетнее макрозадач.

Сложный пример с несколькими

setTimeout(() => console.log('t1'));       // macro
setTimeout(() => console.log('t2'));       // macro
Promise.resolve().then(() => console.log('p1')); // micro
Promise.resolve().then(() => console.log('p2')); // micro
// p1, p2, t1, t2 — все микро, потом макро по одной

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

Обработка: синхронный код → опустошить ВСЮ очередь микрозадач (включая добавленные по ходу) → одна макрозадача → снова все микрозадачи → по кругу. Микрозадачи (Promise) приоритетнее и опустошаются целиком; макрозадачи (setTimeout) — по одной. Поэтому все .then выполняются раньше setTimeout.