Strange behavior with google chrome and FPS

Question

I have coded a little engine to display 5 sprites using javascript in Canvas2D. Everything works fine and is completely optimised.

The FPS fluctuates between 30 and 60 - but the interesting thing is, it says on a constant 60 fps when the google javascript console is open!

Any body else experiencing this?

n.b. I am using requestAnimationFrame

Edit:

Example: http://jsfiddle.net/jrPNy/1

Play Around with the "Particles" Number so your fps is around 40-50. Than open the console, and it goes up to 60 fps. (Chrome 21.0.1180.83)

Answer 1

As the question author remarked in a comment, this has to do with the visible canvas area. Opening the console reduces the height of the viewport, which on a normal-sized display means that there will be less content to render. 60 FPS is a soft limit given by the display refresh rate; doing more frames than that wouldn't make sense since it's impossible to display more than 60 frames per second on a normal monitor.

I tested this on my machine, reducing the CPU speed so that I don't always get 60FPS. In the provided Fiddle example, I had around 24FPS normally. Opening the Console reduced the visible canvas to about 60% of its original size, and the FPS increased to 30 on average. Resizing the Console would influence the FPS accordingly: with only 10% of the canvas visible, the FPS wiggled around 42, and with a very small Console and the entire canvas visible, the FPS went slightly below the original value, to 23. Increasing the CPU speed brought the FPS to a constant 60, regardless of the state of the Console.

Now, given that the JavaScript that generates the screen is still running, regardless of how much of the canvas is visible, what influences the needed processing power is the actual rendering of the canvas, and the way the canvas image is composited onto the rest of the HTML, on the browser window, and finally onto the screen. More and more of that work is moved to the GPU, so when every stage of the compositing process will be done in OpenGL, the FPS should always be maxed out.

Answer 2

I experienced the same thing with chrome on my macbook. It appears the osx dock is causing the frame rate to slow down, when you open the console the viewport is moved away far enough from the dock for the frame rate to go back up to 60fps. If you move the window away from the dock the frame rate goes up. You can have 60fps fullscreen without the console open if you autohide the dock.