Что происходит со скроллом и отрисовкой страницы при выполнении длительной микрозадачи?

JavaScript в браузере однопоточный: и выполнение кода, и отрисовка, и обработка событий происходят в главном потоке. Event loop устроен так, что после каждой макрозадачи (например, обработчика события или таймера) он полностью опустошает очередь микрозадач, и только затем может перейти к рендерингу кадра.

Порядок работы event loop

• Выполнить одну макрозадачу.
• Выполнить все микрозадачи до полного опустошения очереди (включая те, что добавляются по ходу).
• При необходимости выполнить рендеринг (style, layout, paint).
• Перейти к следующей макрозадаче.

Ключевой момент: рендеринг стоит после блока микрозадач. Если микрозадача длится долго или бесконечно порождает новые микрозадачи, браузер никогда не дойдёт до шага отрисовки. Скролл при этом тоже не обрабатывается, потому что события скролла — это макрозадачи, а до них очередь не дойдёт.

Пример блокировки

// Плохо: бесконечная цепочка микрозадач
function loop() {
  Promise.resolve().then(loop);
}
loop(); // страница полностью зависнет

// Плохо: тяжёлая синхронная работа внутри микрозадачи
Promise.resolve().then(() => {
  const start = performance.now();
  while (performance.now() - start < 3000) {} // 3 секунды блокировки
});

В обоих случаях пользователь не сможет проскроллить страницу, анимации остановятся, а вкладка может показать предупреждение о «зависании».

Как избежать блокировки

• Разбивать тяжёлые вычисления на части и отдавать управление через setTimeout или requestAnimationFrame.
• Использовать Web Workers для CPU-интенсивных задач.
• Не создавать бесконечные цепочки промисов без пауз.

// Разбиение работы на порции
function chunkedWork(items, process) {
  let i = 0;
  function step() {
    const end = Math.min(i + 100, items.length);
    for (; i < end; i++) process(items[i]);
    if (i < items.length) setTimeout(step, 0); // отдаём поток
  }
  step();
}

Итог: длительные микрозадачи блокируют главный поток и полностью останавливают скролл и отрисовку, поэтому тяжёлые вычисления нужно дробить или выносить в Web Workers.