> Как обрабатываются call stack и очереди в JavaScript (JavaScript)
Уровень: senior · Роль: frontend · Категория: Технические вопросы
Компании: циан, Spotware
Стек: JavaScript
> Пример ответа
В JavaScript выполнение кода управляется циклом событий (Event Loop), который координирует работу call stack (стека вызовов) и очередей (очереди микрозадач и макрозадач).
Call stack - это структура данных LIFO (последним пришёл - первым ушёл). Когда вызывается функция, её контекст помещается на стек. Когда функция завершается, контекст снимается. Если стек переполняется (например, из-за бесконечной рекурсии), возникает ошибка Maximum call stack size exceeded.
Очереди работают по принципу FIFO (первым пришёл - первым ушёл). В JavaScript есть две очереди:
-
Очередь макрозадач (macrotask queue): сюда попадают
setTimeout,setInterval, события DOM,fetchи т.д. -
Очередь микрозадач (microtask queue): сюда попадают
Promise.then/catch/finally,queueMicrotask,MutationObserver.
Порядок обработки:
-
Выполняется синхронный код из call stack до его опустошения.
-
Затем обрабатывается вся очередь микрозадач (одна за другой, пока она не станет пустой).
-
После этого берётся одна макрозадача из очереди макрозадач.
-
Цикл повторяется.
Пример:
JAVASCRIPTconsole.log('1'); // синхронно, сразу в стекsetTimeout(() => console.log('2'), 0); // макрозадачаPromise.resolve().then(() => console.log('3')); // микрозадачаconsole.log('4'); // синхронно
Вывод: 1, 4, 3, 2. Сначала выполняется весь синхронный код (1 и 4), затем микрозадача (3), и только потом макрозадача (2). Это гарантирует, что промисы обрабатываются раньше таймеров, даже если таймер имеет нулевую задержку.
> Похожие задачи по frontend
Что такое event bubbling и event capturing в JavaScript
В чем разница последовательных и параллельных запросов и как реализовать параллельные запросы в JavaScript?
Какие проверки можно применить к массиву в JSON
Как реализовать функцию каррирования с использованием замыканий в JavaScript
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью