Slight canvas performance dips in a consistent interval

[OriginalEXE]

Hi everyone, I'm new here but already liking the library very much, thanks to everyone contributing!

 

On my CodePen url you will find a demo I have set up that will demonstrate the performance issue I am having. It seems like the dip in fps (which I measure in the Chrome Timeline) is happening pretty consistently every X seconds, where X seems to be related to the duration of my tweens, though I'm not 100% sure of that (my tweens are running in the infinite repeat mode btw.).

 

I would appreciate any feedback, is this too much particles for browsers to handle? I don't think it should be, but possibly. Am I doing something else wrong?

See the Pen vXJgop by OriginalEXE (@OriginalEXE) on CodePen

[Jonathan]

Hello OriginalEXE and Welcome to the GreenSock Forum!

 

Keep in mind that Chrome has Accelerated 2D canvas enabled by default in chrome://flags/ .. you can test and disable that and see if you see more frames in your tests.

• Chrome is known to double CPU usage when hardware acceleration is used for 2D canvas.
• Firefox though will reduce CPU usage during hardware acceleration of 2D canvas.
• Internet Explorer is better than both Chrome and Firefox for accelerated 2D canvas with the least amount of CPU used.

But Firefox has the smallest usage of CPU when hardware acceleration is disabled.

 

Chrome is a resource hog. Here is a chrome bug report requesting that Accelerated 2D Canvas in Chrome should be disabled by default for increased performance.

 

https://bugs.chromium.org/p/chromium/issues/detail?id=102937

 

Also keep in mind that anytime you test for performance in Chrome, that the Google Chrome Dev Team highly recommends that you test performance including fps timelines in a new incognito tab or window. So that your results don't get skewed by Chrome extensions and or other Chrome factors like cache and cookies.

 

New incognito tab or window shortcut: Ctrl + Shift + N

 

Please allow time for other members of the GreenSock community to test and debug your codepen so they can offer other solutions.

 

Other Resources:

HTML5 Rocks Performance: http://www.html5rocks.com/en/tutorials/canvas/performance/

 

Thanks!
 

[OriginalEXE]

Hey Jonathan, thank you for your post

 

In general, I am very happy with the performance, the animation is running in an (almost) constant 60fps, it's more that I am wondering why the fps drop interval seems consistent, and if I can somehow avoid it. Even if not, I'll be happy because it's not very noticeable, but I had to ask

 

So yeah, if anyone that has time and looks at my code can find something I am doing badly, feel free to let me know! Thanks

[OSUblake]

I think your performance hit is that you're drawing too many circles. It's much cheaper to draw an image than it is to draw a circle, so you can optimize your animation by drawing a circle on a separate canvas, and then use drawImage to draw that canvas on the main one. Search around for canvas caching techniques. They're pretty common, and most libraries provide this option for anything that you draw.