> Что произойдет с интерфейсом при бесконечном цикле создания микротасков в JavaScript (JavaScript)

Короткий ответ

Интерфейс полностью заблокируется. Бесконечный цикл создания микротасков (например, через рекурсивный Promise.resolve().then()) никогда не даст event loop перейти к рендерингу и обработке макрозадач, так как очередь микротасков обрабатывается до полного опустошения перед каждым новым макротаском. Это приведет к зависанию страницы.

Подробное объяснение

Event loop в JavaScript работает по строгому алгоритму: сначала выполняется текущий макротаск (например, callback из setTimeout или обработчик клика), затем - все микротаски из очереди (Promise.then, MutationObserver, queueMicrotask), и только после этого происходит рендеринг и берется следующий макротаск.

Если микротаски создаются бесконечно, то после завершения текущего макротаска event loop начинает обрабатывать очередь микротасков. Каждый новый Promise.resolve().then() добавляет в эту очередь еще один микротаск. Поскольку очередь опустошается только когда в ней не остается ни одного микротаска, а новые добавляются быстрее, чем обрабатываются, event loop никогда не дойдет до этапа рендеринга или обработки новых макрозадач.

Браузер может обнаружить зависание через механизм Long Tasks и предложить пользователю остановить скрипт, но до этого интерфейс будет полностью неотзывчив.

На практике

Такая ситуация возникает при:

• рекурсивных Promise-цепочках без базового случая
• неправильном использовании queueMicrotask в циклах
• ошибках в асинхронных генераторах

Решение - использовать setTimeout или requestAnimationFrame для разбиения работы на макротаски, либо вставить проверку на количество итераций и принудительный выход.

Пример кода

JAVASCRIPT
// Бесконечный цикл микротасков - интерфейс зависнет
function infiniteMicrotasks() {
  Promise.resolve().then(() => infiniteMicrotasks());
}
infiniteMicrotasks();

// Безопасный вариант с макротасками
function safeRecursion(count) {
  if (count > 1000) return;
  setTimeout(() => safeRecursion(count + 1), 0);
}
safeRecursion(0);

Как отвечать на собеседовании

Начни с ключевого факта: микротаски блокируют event loop до полного опустошения очереди. Объясни порядок работы event loop: макротаск → все микротаски → рендеринг. Упомяни, что браузер может показать предупреждение о зависшем скрипте. Приведи примеры, где это может случиться на практике, и предложи решение через макротаски.

Что проверяет интервьюер

• Понимание event loop и разницы между микро- и макротасками
• Знание приоритетов выполнения задач в браузере
• Умение предсказывать поведение асинхронного кода
• Понимание механизмов отзывчивости интерфейса

Типичные ошибки

• Путаница между микротасками и макротасками (например, думать, что setTimeout(fn, 0) создает микротаск)
• Утверждение, что бесконечный цикл микротасков вызовет stack overflow (нет, это не рекурсия в стеке)
• Игнорирование того, что рендеринг происходит только после микротасков
• Предложение использовать async/await как решение (он тоже основан на Promise и создает микротаски)