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

Макротаски (macrotasks) — это основные задачи, которые ставятся в очередь событий, например:

обработчики событий (click, load)
setTimeout, setInterval
сетевые запросы

Микротаски (microtasks) — задачи с более высоким приоритетом, которые выполняются сразу после текущей операции и перед следующей макротаской. К ним относятся:

Promise.then/catch/finally
MutationObserver

После выполнения текущего скрипта Event Loop сначала выполняет все микротаски, а затем переходит к следующей макротаске.

Пример:

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? Что такое макротаски и микротаски? Что относится к микротаскам?