> Как проходят таски в event loop (JavaScript)

Event Loop - это механизм, который позволяет JavaScript, будучи однопоточным, выполнять асинхронные операции без блокировки основного потока. Таски (задачи) проходят через несколько стадий:

1. Синхронный код выполняется сразу в стеке вызовов (call stack).
2. Микротаски (Microtasks) - ставятся в очередь после каждой завершённой макротаски. Сюда попадают:
   • Promise.then/catch/finally
   • queueMicrotask()
   • MutationObserver Очередь микротасок обрабатывается полностью до перехода к следующей макротаске.
3. Макротаски (Macrotasks) - берутся из очереди по одной за цикл. Примеры:
   • setTimeout, setInterval
   • События DOM (click, load)
   • fetch (коллбэки)
   • requestAnimationFrame (выполняется перед рендерингом)

Порядок выполнения:

1. Выполнить весь синхронный код.
2. Обработать все микротаски (если в процессе добавляются новые - они тоже выполняются).
3. Взять одну макротаску из очереди.
4. Повторить цикл.

Пример:

JAVASCRIPT
console.log('1'); // синхронно
setTimeout(() => console.log('2'), 0); // макротаска
Promise.resolve().then(() => console.log('3')); // микротаска
console.log('4'); // синхронно
// Вывод: 1, 4, 3, 2

Таким образом, микротаски всегда имеют приоритет над макротасками, что критично для производительности и предсказуемости асинхронного кода.