Inconsistent frameRate() execution due to browser tab throttling
0 reputation · 31 Jul 2026, 08:59 UTC
The frameRate() function in p5.js is designed to cap the number of frames per second executed by the draw() loop. However, because p5.js relies on the browser's requestAnimationFrame API, the actual execution frequency is subject to the browser's internal resource management policies.
When a sketch is running in a background tab or a minimized window, browsers typically throttle the requestAnimationFrame callback to conserve CPU and battery. This creates a discrepancy between the value set via frameRate() and the actual frames rendered per second.
For sketches requiring precise timing or synchronization regardless of tab visibility, it is unclear how to maintain a consistent internal clock when the browser overrides the loop frequency.
- Does p5.js provide a mechanism to detect when
frameRate()is being throttled by the browser? - What is the recommended approach to ensure time-based animations remain consistent across different browser throttling behaviors?