Сколько будет repaint в один кадр

Браузер стремится выполнить только один repaint за кадр (16.6 мс при 60 FPS). Однако, если в одном кадре происходит несколько изменений стилей, которые влияют на отображение, браузер объединяет их в один repaint для оптимизации.

Пример:

// Будет один repaint, несмотря на два изменения
element.style.color = 'red';
element.style.backgroundColor = 'blue';

Исключение: если изменения происходят асинхронно или с задержкой (например, через requestAnimationFrame), может быть несколько repaint'ов.

// Может вызвать два repaint'а
requestAnimationFrame(() => {
  element.style.color = 'red';
  
  requestAnimationFrame(() => {
    element.style.backgroundColor = 'blue';
  });
});

Для минимизации repaint'ов лучше группировать изменения DOM и стилей.