Почему существуют отдельные очереди для micro и macro tasks в Event Loop

Event Loop использует две отдельные очереди для микро- и макрозадач, чтобы обеспечить приоритетность выполнения. Микрозадачи (Promise, MutationObserver) выполняются сразу после текущего синхронного кода, даже перед рендерингом, что гарантирует их высокий приоритет. Макрозадачи (setTimeout, setInterval) выполняются после рендеринга и микрозадач, что позволяет браузеру обновлять UI между задачами.

Пример:

console.log('Start');

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

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

console.log('End');

Вывод:

Start
End
Promise
Timeout