Как Event Loop работает с рендерингом

Event Loop управляет выполнением кода, обработкой событий и рендерингом в браузере. Он состоит из нескольких фаз:

1. Выполнение синхронного кода из Call Stack
2. Обработка микрозадач (Promises, MutationObserver) - имеют высший приоритет
3. Рендеринг (если нужно) - происходит только если Event Loop решает, что пора обновить UI
4. Обработка макрозадач (setTimeout, события)

Рендеринг блокируется, пока Call Stack не пуст. Браузер старается рендерить с частотой 60fps (~16ms на кадр), но может пропустить кадр, если JS-код выполняется дольше.

// Долгий синхронный код заблокирует рендеринг
button.addEventListener('click', () => {
  // Блокируем рендеринг на 1 секунду
  const end = Date.now() + 1000;
  while (Date.now() < end) {}
  
  // UI обновится только после завершения цикла
});

Для плавного UI важно разбивать тяжелые задачи на части через requestAnimationFrame или setTimeout.