Расскажи про асинхронность в JavaScript: очереди микротасков и макротасков, как работает Event Loop?

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

Макротаски (task queue) — это очередь задач, таких как обработчики событий, setTimeout, setInterval, сетевые запросы. После выполнения текущего стека вызовов Event Loop берет следующую макротаску из очереди и выполняет её.

Микротаски (microtask queue) — это очередь более приоритетных задач, например, промисы (Promise.then/catch/finally), MutationObserver. После выполнения каждой макротаски Event Loop сначала выполняет все микротаски из очереди, прежде чем перейти к следующей макротаске.

Как работает Event Loop:

1. Выполняется стек вызовов (синхронный код).
2. Когда стек пуст, Event Loop берет все микротаски из очереди и выполняет их подряд.
3. После выполнения микротасков Event Loop берет одну макротаску из очереди и выполняет её.
4. Повторяет цикл.

Это обеспечивает, что микротаски выполняются раньше, чем следующая макротаска, что важно для последовательности асинхронных операций.

Пример:

console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');

Вывод будет:

start
end
promise
timeout

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