Event Loop: как JavaScript выполняет асинхронный код

Event Loop — это механизм, который гарантирует, что асинхронный код в JavaScript будет выполнен последовательно, без блокировки основного потока. Он управляет стеком вызовов, микрозадачами и макрозадачами, позволяя обработать таймеры, запросы сети и пользовательские события в предсказуемом порядке. В 2026 году более 90 % современных веб‑приложений полагаются именно на эту модель.

Как работает стек вызовов в Event Loop?

Стек вызовов (call stack) хранит текущие функции, которые находятся в процессе выполнения; когда функция завершает работу, она удаляется из стека. Если стек пуст, Event Loop проверяет очередь микрозадач. Таким образом, синхронный код всегда исполняется первым.

• 1. Функция вызывается и помещается в стек.
• 2. Если внутри функции происходит await или Promise.then, управление возвращается в стек, а оставшаяся часть кода помещается в очередь микрозадач.
• 3. После завершения всех синхронных операций стек опустошается.

Почему микрозадачи выполняются раньше макрозадач?

Микрозадачи (microtasks) имеют более высокий приоритет, потому что они часто связаны с разрешением промисов, что критично для корректного порядка выполнения кода. После каждой итерации цикла Event Loop, прежде чем перейти к следующей макрозадаче, движок обрабатывает все микрозадачи.

• 1. После очистки стека вызывается Job Queue (очередь микрозадач).
• 2. Все задачи из Job Queue выполняются последовательно, даже если они были добавлены в процессе выполнения предыдущих микрозадач.
• 3. Только после полного опустошения Job Queue Event Loop переходит к Task Queue (очередь макрозадач).

Что делает очередь макрозадач и как она влияет на таймеры?

Очередь макрозадач (Task Queue) хранит события, такие как клики, сетевые запросы и таймеры (setTimeout, setInterval). Они обрабатываются только после того, как стек и микрозадачи полностью очищены, что гарантирует предсказуемый порядок.

• 1. Таймеры с задержкой 0 мс всё равно попадают в очередь макрозадач и могут быть выполнены через 4‑15 мс в зависимости от нагрузки.
• 2. В 2026 году оптимизации V8 позволяют сократить среднее время обработки макрозадач до 10 мс.
• 3. Если в очередь попадает более 1 млн запросов, браузер может замедлить их обработку, увеличивая задержку до 50 мс.

Как отладить асинхронный код с помощью инструмента на toolbox-online.ru?

Для отладки используйте онлайн‑симулятор Event Loop Visualizer, который визуализирует стек, микрозадачи и макрозадачи в реальном времени. Это помогает увидеть, где «застревает» промис и как распределяется время выполнения.

• 1. Откройте страницу инструмента и вставьте ваш JavaScript‑код.
• 2. Нажмите «Запустить» — визуальная панель покажет последовательность шагов.
• 3. При необходимости настройте «скорость» анимации, чтобы увидеть детали на уровне 1 мс.
• 4. Сохраните результаты и проанализируйте, какие операции занимают более 15 мс и могут стоить до 500 рублей в облачных сервисах.

Что делать, если промис застрял в ожидании?

Если промис остаётся в состоянии pending дольше 30 секунд, вероятнее всего, произошёл сбой сети или логическая ошибка. Проверьте таймауты, обработчики ошибок и используйте Promise.race для ограничения времени ожидания.

• 1. Добавьте setTimeout с откатом, который отклонит промис через 10 000 мс.
• 2. Используйте catch для логирования ошибки в консоль и отправки отчёта в систему мониторинга.
• 3. При работе с API, убедитесь, что в запросе указаны корректные заголовки и токены, иначе сервер может вернуть 401 – ошибку, что приводит к бесконечному ожиданию.

Воспользуйтесь бесплатным инструментом Event Loop Visualizer на toolbox-online.ru — работает онлайн, без регистрации.