В какой момент выполнения очереди происходит перерисовка страницы

Перерисовка (ререндер) страницы происходит после выполнения текущего макрозадачи (например, скрипта) и всех микрозадач (например, промисов) в очереди событий. Браузер старается делать ререндер с частотой 60 кадров в секунду (примерно каждые 16.6 мс), но только если есть изменения в DOM или стилях.

Пример:

// 1. Макрозадача - выполняется синхронный код
console.log('Start');
element.style.color = 'red'; // Изменение стиля

// 2. Микрозадачи (Promise)
Promise.resolve().then(() => {
  console.log('Promise');
  element.style.backgroundColor = 'blue'; // Еще изменение
});

// 3. Перерисовка произойдет после выполнения всего кода
console.log('End');

Порядок: синхронный код → микрозадачи → ререндер (если нужно) → следующая макрозадача.