Why do I get better performance in Chrome when Dev Console is up?

Question

I'm currently working on a small canvas game written in pure javascript from scratch.

The game involves a 2d lighting algorithm similar to this one, but with one light source and 25 polygons which makes for about 30,000 calculations per frame.

My frame rate is great in Safari, meh in Chrome, and unplayable in Firefox. However, if I have the Chrome developer console up while playing the game, the frame rate is the same as Safari.

What could be the reason for this?

---

After the comments suggested the window size might be affecting the frame rate, I found out that the smaller the window, the smoother the game runs but only in chrome. The amount that is drawn on screen or any calculations used by the game don't depend at all on the screen size.

I measure the frame rate difference purely by eye, and you can see the effect in these gifs:

Bad, big window:

Good, small window:

The game runs much smoother in the browser than is apparent in these gifs, but the effect is still noticeable.

I can get the same effect to happen with the first example in the link that I posted. Is it just me or does anyone else get the same effect?

---

Even stranger... I gotten the same effect on several other websites, like Facebook when I scroll the home feed. The bigger the window, the choppier the scrolling gets. Is this a Chrome specific thing, is anyone getting similar results?

Answer 1

I've seen this as well in my pages/applications. The issue seems to apply to anything, but is more pronounced with canvas and accelerated CSS. As far as I can tell, this issue is a performance bug relating to Chrome's composited layer rendering. Basically, Chrome breaks the page up into layers and uses the GPU to render those layers. You can see these by enabling the "Show composited layer borders" option in the "Rendering" tab on the dev console. Chrome's FPS performance decreases as the number of composite layers increases, regardless of the layers changing or not.

Here's an independent example. Steps to reproduce:

1. Load this page in Chrome, it's a relatively simple animated CSS demo that is a fixed size like your game: http://www.subcide.com/experiments/fail-whale/
2. Bring up the Chrome developer window (pop it out so it's an independent window) and enable the "Show FPS meter" option.
3. Size the window small so that it just contains the fail whale demo. Note your FPS.
4. Now size the window large or full screen it. Note your FPS.

With a small window, I get 55 FPS. Full screen, I get 34 FPS. I would expect the FPS to be nearly the same, regardless of the page size as the animated area doesn't change. The FPS seems to be proportional to the number of composite layers on the visible screen. Also, resizing the window results in the animation being chunky and skipping frames. If I perform the same window resizing in Safari, the animation stays smooth. Safari knows there's nothing new to render, while Chrome is seemingly doing a bunch of work for no reason.

So the reason why you see better performance when your dev console is open is because you have your dev console inline/embedded with the page, which makes the page itself smaller when it's open. This results in a page with fewer composite layers for Chrome to handle, which results in better FPS. If you pop your developer console out so it's an independent window and doesn't affect the page size, your FPS won't be affected by the dev console being up or not.

This appears to be the "why" this is happening. Now, if anyone figures out what can be done about this, I'd certainly be interested to know.