Flash / Canvas Comparison
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
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.
Leave a comment
2 Comments to Flash / Canvas Comparison
What OS are you using?
A similar benchmark was done here: http://www.themaninblue.com/writing/perspective/2010/03/22/
cheers,
Dan
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.
June 16, 2010