В какой момент работы Event Loop происходит отрисовка

Отрисовка (рендеринг) происходит после выполнения текущего таска и микрозадач (microtasks), но перед обработкой следующего макрозадачи (macrotask) из очереди.

Браузер стремится рендерить страницу с частотой ~60fps (каждые ~16ms). Если между кадрами есть свободное время, Event Loop может выполнять другие задачи.

Пример порядка:

1. Выполняется текущий таск (например, обработчик события)
2. Выполняются все микрозадачи (Promise, MutationObserver)
3. Если нужно - происходит ререндеринг
4. Берется следующая макрозадача из очереди (setTimeout, события и т.д.)

button.addEventListener('click', () => {
  // 1. Синхронный код выполняется сразу
  console.log('Click!');
  
  // 2. Микрозадачи выполняются перед рендером
  Promise.resolve().then(() => console.log('Microtask'));
  
  // 3. Макрозадача выполнится после возможного рендера
  setTimeout(() => console.log('Macrotask'), 0);
});