> Как работают call stack, callback queue, event loop, микротаски и макротаски в JavaScript (JavaScript)

В JavaScript выполнение кода организовано через call stack (стек вызовов). Это структура данных LIFO, куда попадают функции при их вызове. Когда функция завершается, она удаляется из стека. Если стек переполняется (например, из-за бесконечной рекурсии), возникает ошибка.

Асинхронные операции (setTimeout, fetch, обработчики событий) не попадают сразу в стек. Они передаются в Web API (браузерное окружение) или libuv (Node.js). После завершения их колбэки помещаются в соответствующую очередь.

Макротаски (macrotasks) - это задачи из очереди callback queue: setTimeout, setInterval, I/O, события UI. Event loop на каждой итерации берёт одну макротаску из очереди и выполняет её.

Микротаски (microtasks) - очередь с более высоким приоритетом. Сюда попадают Promise.then/catch/finally, queueMicrotask, MutationObserver. После каждой макротаски event loop опустошает всю очередь микротасок перед тем, как взять следующую макротаску.

Event loop - это бесконечный цикл, который:

1. Проверяет, пуст ли call stack.

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. Сначала синхронный код, затем микротаска (Promise), затем макротаска (setTimeout).

Микротаски блокируют event loop - если они порождают новые микротаски, очередь не опустеет, и макротаски не выполнятся. Это важно учитывать для производительности.