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

В JavaScript очередь задач обрабатывается следующим образом:

1. Сначала выполняются все микротаски (Promise callbacks, queueMicrotask, MutationObserver)
2. Затем браузер рендерит страницу (если нужно)
3. После этого выполняются макротаски (setTimeout, setInterval, события, requestAnimationFrame)

Пример:

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

queueMicrotask(() => console.log('Microtask'));

console.log('End');

Вывод будет:

Start
End
Promise 1
Microtask
Promise 2
Timeout

Микротаски выполняются до макротасков и рендеринга, причем вся очередь микротасков должна быть очищена перед переходом к следующему этапу.