Flash / Canvas Comparison

Wednesday, June 16th, 2010 | Web Development | Gabriel Mariani

With the canvas being a bit more prevalent and wanting to learn more about this HTML5 thing I decided to port Orion (one of my favorite projects) into JavaScript. I was curious to see the perfomance difference between the Flash Player and the (currently) fastest browser Google Chrome.

Now, I’m no JS expert so please let me know if there are any optimizations I could make but the logic is pretty sound in Flash. Keep in mind I don’t care how fast the page loads up, just how fast it performs afterward.

I also have it separated into two pages to keep the browsers from crashing or taking up too much memory. Also, to prevent crashing both demos auto throttle. As long as they can stay above 29fps they’ll add more particles. If not, it’ll throttle down and remove particles. This is checked every 3 seconds.

Below is the current test results I’ve experienced on my computer here at work. Just from what I’ve been able to experience, the Flash Player performs about 600% faster than Google Chrome. Which makes me wonder when HTML will be able to replace Flash in the interactive realm.

Also something to note, is the memory usage (which you can see in Chrome) is about the same in Canvas or Flash. Which leads me to believe that if people are complaining about performance in Flash now. Wait till people try to do the same thing in JavaScript. Same memory usage, same CPU usage, just slower.

Browser Particles Particles Added Per Render
Canvas – Firefox 3.6.4 14,000 600
Canvas – Chrome 6.0.427.0 50,000 2,100
Canvas – Opera 10.60 Beta 50,000 2,100
Flash 10.0.45.2 260,000 11,000
Flash 10.0.45.2 Debugger 150,000 6,400
Flash 10.1.53.64 270,000 11,500
Flash 10.1.53.64 Debugger 225,000 9,500

* All results tested with a minimum FPS of 29

Canvas Particle Speed Test

Flash (Bitmap) Particle Speed Test

Update June 17

Here are the specs for my work computer as a reference:
MS Windows XP Professional 32-bit SP3
Intel Core 2 Duo E6550 @ 2.33GHz
2.0GB Dual-Channel DDR2 @ 332MHz
256MB ATI Radeon HD 2400 Pro (Dell)
78GB Western Digital WDC WD800ADFS-75SLR2 (IDE)

As you can see, nothing terribly impressive.

Tags: , ,

Leave a comment

Please upgrade your Flash Player To submit a comment, you must have Flash Player 9.0.0 or higher installed. I use a flash form here to help prevent spam.

2 Comments to Flash / Canvas Comparison

Daniel Tome
June 16, 2010

What OS are you using?
A similar benchmark was done here: http://www.themaninblue.com/writing/perspective/2010/03/22/

cheers,
Dan

Gabriel
June 17, 2010

Daniel,

I was looking over his code for the particle engine, while simpler, it has some bottle necks. It’s built like Javascript which doesn’t take advantage of the AVM to it’s fullest. Like I said, I’m a Flash Dev, so it’s optimized for Flash. But my thinking is that the AVM is much stricter than V8 or whatever JS engine runs it. So working from AS -> JS is easier/better than JS -> AS. If there are any optimizations for the JS side I’d gladly make it. But as it stands, I think my particle engine is a better gauge of performance than his tests.

Search

Ad