Какие были проблемы с анимацией до requestAnimationFrame

До requestAnimationFrame анимации делали через setInterval или setTimeout, что вызывало несколько проблем:

1. Точность таймеров - браузеры ограничивают минимальную задержку (обычно 4мс), что делало анимации менее плавными.

2. Просадки FPS - если вкладка неактивна, таймеры продолжали работать, тратя ресурсы впустую.

3. Рассинхронизация с монитором - анимации не были привязаны к частоте обновления экрана (обычно 60Hz), что вызывало "дрожание".

Пример проблемного кода:

// Плохая практика
setInterval(() => {
  element.style.left = (parseInt(element.style.left) + 1) + 'px';
}, 16); // Попытка имитировать 60fps

requestAnimationFrame решает эти проблемы, синхронизируясь с частотой обновления экрана и автоматически паузируясь при скрытии вкладки.