> Что происходит при рекурсивном вызове с созданием промисов в JavaScript: зависнет ли страница или будет пропускаться рендер (JavaScript)

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

Страница не зависнет, но рендер может пропускаться. Рекурсивные промисы - это асинхронные операции, которые планируются в microtask queue. Event loop обрабатывает microtasks до перехода к следующей macrotask, включая рендеринг. Если рекурсия создаёт бесконечную цепочку промисов, microtask queue никогда не опустеет, и браузер не сможет выполнить рендер, что приведёт к "зависанию" интерфейса без блокировки основного потока.

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

Промисы в JavaScript обрабатываются через microtask queue. Когда промис резолвится, его callback попадает в очередь microtasks. Event loop выполняет все microtasks из очереди перед тем, как перейти к следующей macrotask (например, к рендерингу или обработке событий).

При рекурсивном вызове с созданием промисов каждый новый промис добавляет callback в microtask queue. Если рекурсия не имеет условия выхода, очередь microtasks будет постоянно пополняться. Event loop будет бесконечно обрабатывать microtasks, никогда не достигая фазы рендеринга.

Важно: основной поток не блокируется в традиционном смысле (как при синхронном бесконечном цикле). Процессор продолжает работать, но браузер не может обновить интерфейс, обработать пользовательский ввод или выполнить другие задачи. Это выглядит как зависание страницы.

Если рекурсия конечна, всё работает нормально: каждый промис обрабатывается, очередь опустошается, и рендер происходит между macrotasks.

На практике

На практике рекурсивные промисы используются для:

• последовательной обработки больших массивов данных без блокировки UI
• реализации асинхронных обходов деревьев
• создания цепочек асинхронных операций с задержками

Ключевой момент - всегда контролировать глубину рекурсии и предусматривать условие выхода. Для длительных операций лучше использовать setTimeout или setImmediate, чтобы дать браузеру возможность отрендерить изменения.

Пример кода

JAVASCRIPT
// Бесконечная рекурсия - страница "зависнет"
function infiniteRecursion() {
  return Promise.resolve().then(infiniteRecursion);
}

infiniteRecursion();
// UI не обновится, страница выглядит зависшей

// Конечная рекурсия - работает нормально
function finiteRecursion(n) {
  if (n <= 0) return Promise.resolve();
  return Promise.resolve().then(() => finiteRecursion(n - 1));
}

finiteRecursion(1000).then(() => console.log('done'));
// Рендер происходит между macrotasks, всё работает

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

Начните с чёткого ответа: страница не заблокируется, но рендер будет пропускаться. Объясните механизм event loop: microtask queue обрабатывается полностью перед рендерингом. Приведите пример бесконечной рекурсии и объясните, почему это приводит к "зависанию". Упомяните, что это не блокировка основного потока, а голодание рендеринга. Добавьте, что для длительных операций лучше использовать setTimeout с нулевой задержкой, чтобы дать браузеру шанс отрисовать кадр.

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

Интервьюер проверяет:

• понимание event loop и фаз его работы
• знание разницы между microtasks и macrotasks
• понимание того, как рендеринг вписывается в цикл событий
• способность предсказать поведение асинхронного кода
• знание практических решений для длительных асинхронных операций

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

• Утверждение, что страница полностью заблокируется - это неверно, основной поток продолжает работать
• Путаница между microtasks и macrotasks: промисы - это microtasks, а setTimeout - macrotask
• Игнорирование того, что рендеринг происходит между macrotasks, а не между microtasks
• Предложение использовать async/await как решение - это не меняет механизм обработки очередей
• Отсутствие упоминания о голодании рендеринга как основной проблеме