All 10 Event Loop & Concurrency questions
More in Event Loop & Concurrency
Why does Promise.resolve().then(cb) run before setTimeout(cb, 0), even with a 0ms delay? How would you break a large synchronous task into chunks to keep the UI responsive? What is 'starvation' of the macrotask queue, and how can recursive microtasks cause it? How does async/await map onto the microtask queue under the hood?
Advertisement
Back to results for “Performance & Optimization”
JavaScript › Event Loop & Concurrency

What's the relationship between requestAnimationFrame and the event loop's rendering step?

Advanced

Answer

requestAnimationFrame schedules a callback to run right before the browser's next repaint, after microtasks have drained — making it the right tool for visual updates synced to the display's refresh rate, unlike setTimeout which has no such guarantee.
function animate() {
  element.style.left = `${position++}px`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
Real-world example Building a smooth custom animation that stays in sync with the browser's actual repaint cycle, avoiding jank.

Common follow-ups: Why is requestAnimationFrame generally preferred over setInterval for animations?

Performance Optimization: Debouncing Throttling & Memoization
All 10 Event Loop & Concurrency questions