Что произойдёт с браузером при бесконечном добавлении микрозадач? Почему это опаснее, чем бесконечные макрозадачи?

Как работает event loop

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

Бесконечные микрозадачи

Если микрозадача постоянно добавляет новую микрозадачу (например, через рекурсивный Promise.resolve().then()), очередь микрозадач никогда не опустеет. Event loop застрянет в цикле обработки микрозадач, не переходя к макрозадачам, включая рендеринг и обработку пользовательского ввода. Браузер зависнет, страница перестанет отвечать.

function infiniteMicrotasks() {
  Promise.resolve().then(infiniteMicrotasks);
}
infiniteMicrotasks();
// Браузер зависнет

Бесконечные макрозадачи

Если макрозадача добавляет новую макрозадачу (например, через setTimeout), каждая выполняется отдельно, и между ними event loop может обработать другие макрозадачи, включая рендеринг. Хотя страница может тормозить, она не зависнет полностью, так как браузер успевает обновлять интерфейс.

function infiniteMacrotasks() {
  setTimeout(infiniteMacrotasks, 0);
}
infiniteMacrotasks();
// Страница тормозит, но не зависает

Вывод

Бесконечные микрозадачи опаснее, так как блокируют event loop на уровне, не позволяя браузеру выполнять рендеринг и реагировать на действия пользователя. Это может привести к полной потере отзывчивости интерфейса. Важно избегать рекурсивных микрозадач без условий выхода, особенно в асинхронном коде, где используются Promise или async/await.