Event Loop в JavaScript — это механизм, который позволяет выполнять асинхронный код, не блокируя основной поток.

Основные компоненты:

Call Stack — стек вызовов, где выполняется текущий код.
Task Queue (макротаски) — очередь задач, которые будут выполнены после освобождения стека.
Microtask Queue (микротаски) — очередь микротасков, которые имеют более высокий приоритет.

Когда стек пуст, Event Loop сначала выполняет все микротаски из очереди микротасков, а затем берет одну макротаску из очереди макротасков и выполняет её.

Макротаски включают:

setTimeout
setInterval
setImmediate (в Node.js)
I/O операции

Микротаски включают:

Promise.then/catch/finally
process.nextTick (в Node.js)
MutationObserver

Пример:

console.log('script start');

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

Promise.resolve().then(() => {
  console.log('promise1');
}).then(() => {
  console.log('promise2');
});

console.log('script end');

Вывод будет:

script start
script end
promise1
promise2
setTimeout

Потому что микротаски (промисы) выполняются сразу после основного скрипта, а макротаски (setTimeout) — позже.

Таким образом, Event Loop обеспечивает порядок выполнения асинхронных операций, разделяя их на микротаски и макротаски с разным приоритетом.

Как устроен Event Loop в JavaScript? Расскажите про микро- и макро-таски.