I'm developing a web game which uses a fixed physics timestep.

Currently I am doing all my physics and rendering in a requestAnimationFrame function.

This works perfectly, but requestAnimationFrame suspends and stops running when the user tabs out (to save processor performance I suppose).

As a result, if you tab out for like 30 minutes and then come back, the game has to simulate 30 minutes of physics in order to get back to the right spot.

This is very bad, as it causes the tab to freeze while the CPU cranks to 100% for the next 3 minutes while it runs all those physics calculations.

I think the only solution is to make the physics run while the tab is inactive, but I'm not sure how. I suppose I should only have the rendering in requestAnimationFrame, because it doesn't matter if that gets missed. But the physics need to be maintained.

Apparently setInterval also suspends when the user tabs out.

So, how should this be handled? I need a way to run physics every 16.6667 milliseconds regardless of whether the user is tabbed in or not. Is this possible? I've heard about WebWorkers but is that the actual solution? To put the entire game inside a WebWorker? What about when I want to change the DOM and things like that? Seems like a bit much.