bonsai animations take too much CPU when not visible

[greggman]

Example:

1. Go to http://demos.bonsaijs.org/demos/circles/index.html
2. Open a new tab
3. Check the task manager, system profiler or activity monitor

What should happen:

CPU usage should go down to 0-2%

What happens instead:

On my mac in both Firefox and Chrome 30-50% of the CPU is being used and my battery is going down even though the tab is not visible.

Two solutions come to mind

1. Use requestAnimationFrame to process the animations. That will automatically
   stop calling you if you're not visible.
2. Use the Page Visibility API to stop processing

I suppose some apps might want to keep running even if offscreen. Maybe you should have to opt into always running if you want that? I'd think the default would be best if it didn't DoS the user's machine

[davidaurelio]

@greggman Thank you for pointing this out. We are very aware of these problems and had ideas similar to yours.

Just a little bit of background, in case you don’t have full knowledge of the architecture: We are running two tasks, a runner that runs the actual movie code, and a renderer that draws changes to the screen. While the renderer does not signalize its ability to draw, the runner will queue and combine any pending changes and flush them as soon as the renderer is free again.

1. We are currently experimenting with requestAnimationFrame to stop the renderer when the page is not visible. The first naïve approaches made the frame rate go down, though. @basecode has some promising experiments running, so there should be an update in the near future.
2. The page visibility API probably is a good mean to stop both renderer and runner. There are no concrete plans yet, but we could stop the renderer when the page is not visible and give the developer the opportunity to opt into stopping the runner as well.