В чём разница между двумя вариантами кода с рекурсивными промисами/микрозадачами с точки зрения блокировки страницы?

Основное различие

Синхронная рекурсия — это вызов функции самой себя внутри текущего стека вызовов. Каждый новый вызов добавляется в стек, и пока рекурсия не завершится, стек не освобождается. Браузер не может обработать события, обновить DOM или выполнить другие задачи, потому что основной поток занят. Это приводит к блокировке страницы, и пользователь видит зависание.

Рекурсивные промисы используют асинхронный подход: каждый вызов создаёт промис, который добавляет микрозадачу в очередь. Микрозадачи выполняются после завершения текущего стека, но перед следующей макрозадачей. Это позволяет браузеру вставить обработку событий между итерациями, поэтому страница остаётся отзывчивой.

Примеры кода

Синхронная рекурсия (блокирует):

function syncRecursion(n) {
  if (n === 0) return;
  syncRecursion(n - 1);
}
syncRecursion(100000); // страница зависнет

Рекурсивный промис (не блокирует):

function asyncRecursion(n) {
  if (n === 0) return Promise.resolve();
  return Promise.resolve().then(() => asyncRecursion(n - 1));
}
asyncRecursion(100000); // страница останется отзывчивой

Как это работает

В синхронном случае стек вызовов растёт до предела, и браузер не может выполнить другие задачи. В случае промисов каждый вызов возвращает промис, который разрешается в микрозадаче. Микрозадачи обрабатываются после завершения текущего стека, но перед рендерингом. Это даёт браузеру возможность обновить интерфейс, если между итерациями есть пауза.

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

Вывод

Используйте рекурсивные промисы для асинхронных операций, которые не должны блокировать интерфейс, например, при обработке больших массивов данных или пошаговых вычислениях. Синхронная рекурсия подходит только для небольших глубин, где нет риска переполнения стека или зависания страницы.