javascript - Why do I get better performance in Chrome when Dev Console is up? - Stack Overflow

admin管理员组

文章数量:1344233

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 ments 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?

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 ments 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?

• javascript
• html
• performance
• google-chrome
• google-chrome-devtools

Share Improve this question Follow edited Dec 9, 2014 at 0:21 tborenst asked Dec 8, 2014 at 21:38 tborensttborenst 99222 gold badges99 silver badges1818 bronze badges 8

• 6 Very cool, but your question is a little light on details. How are you measuring the frame rate? How big is the difference between the frame rate with and without dev tools? Can you show your real use case? Are you seeing the same behavior in the source you linked to? and so on... – apaul Commented Dec 8, 2014 at 21:52
• 5 If bringing up the console changes the size of, or clips the image drawn to screen, you've decreased the amount of work that needs to be done each frame. – enhzflep Commented Dec 8, 2014 at 22:31
• 1 Just looked at the page you linked to.(With an i7 3537u) I get 60fps for all of the demos, with 2 exceptions. The last one, with 2 light-sources (I get about 42fps) and the first one, where I get between 50 and 56 fps. The size of your gifs is quite large - The 2nd appears to have a dynamic area of about 800x500. Drawing @ 32 bits equates to 1,6000,000 bytes. This is too large to fit into the cache along with other things the browser is doing - it's reasonable to expect cache-misses will have an impact on performance. Fps display: developer.chrome./devtools/docs/rendering-settings – enhzflep Commented Dec 9, 2014 at 0:54
• 1 A pleasure. :) I'm not sure about Firefox or Safari, but Chrome has an inbuilt profiler, thus allowing you to see exactly where the time is being spent in your application. If you open the JS tools with Ctrl-Shift-I and then open the Profiles tab, you can select "Collect JavaScript CPU profile". After starting the profiling and interacting with the page for some time, hit the stop button and check out the results. Perhaps(hopefully) there are gains to be made in one of the hot-spots. Unfortunately, not all browsers are created equal. :( You may have to accept poor performance in some.. – enhzflep Commented Dec 9, 2014 at 1:48
• 1 @enhzflep Thanks. I profiled the game and optimized it where I could before I noticed the change in performance when the console was up. Safari displays the best frame rate but also has a delay on all sounds, while Chrome and Firefox do sound well while having much lesser framrates. Oh well, HTML5, gotta get used to it. :) Thanks again for your help. – tborenst Commented Dec 9, 2014 at 2:17

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 12

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 posited 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 posited layer borders" option in the "Rendering" tab on the dev console. Chrome's FPS performance decreases as the number of posite 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./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 posite 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 posite 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.

本文标签： javascriptWhy do I get better performance in Chrome when Dev Console is upStack Overflow