I would say the results are shocking but they aligned with my hypothesis. Flash outperforms HTML5 for simple animation used at the core of nearly every game on the internet. The basic principal of games is that the screen is refreshed on an interval x number of times per second as one or many objects move.
This is really a comparison of ActionScript vs JavaScript. They are the development languages behind Flash and HTML5. Both of them are based off of the same core ECMAScript. They both have a similar number of security vulnerabilities JavaScript (1,590) vs Flash (1,110). Both of these technologies SHOULD perform the same.
Problem:
My fan would kick into high gear every time I played a game made with the new canvas component in HTML5. Convinced the crazy fan and high CPU were due to poor development practices I decided to run a simple test. Bounce a black ball up and down at 60 FPS. The concepts used in this demo are the same at the core of almost every game. Don’t take my word for it. Open up your task manager and visit the following links:
HTML5 (JavaScript):
http://www.blackcj.com/blog/wp-content/jsdemos/BallBounce/
Flash (ActionScript):
http://www.blackcj.com/blog/wp-content/swfs/BallBounce/
Want to check out the Flash source but don’t want to pay for Adobe products? Luckily Flash Develop is available for free! So is the SDK!
Results:
These results are from my PC. I would love to see results from a MAC! Any takers? Feel free to post them in the comments section.
HTML5 (JavaScript):
Firefox – 18% CPU
Chrome – 18% CPU
IE – Doesn’t work
Flash (ActionScript):
Firefox – 3% CPU
Chrome – 3% CPU
IE – 0% CPU – This was the most surprising result
Conclusion:
If your going to build a game or do simple animation, use Objective-C or Flash. JavaScript is definitely a useful language that I wouldn’t want to go without but it needs significant help in the performance arena. I would not suggest dropping a lot of money into development for animations or games with canvas at this point. You’ll quickly find users complaining about battery life and CPU usage.
Links:
Flash Player: CPU Hog or Hot Tamale? It Depends.
“HTML5″ versus Flash: Animation Benchmarking
Flash ActionScript performance vs JavaScript (Even in 2006 ActionScript performed better than JavaScript)
*HTML5 won’t officially launch until 2012 (or later) and performance might be improved by then. I haven’t seen any information either way on performance but it’s important to point out that the HTML5 specification is still in DRAFT.
You should add a test using pure DOM methods (no canvas) as well to be a true test of HTML5.
After testing on a mac, I didn’t get quite as astonishing results.
2.5Ghz Intel Core 2 Duo MacBook Pro –
Firefox:
Flash – 15%
JS – 18%
Safari:
Flash – 16%
JS – 20%
w/ about 2-5% idle browser consumption.
I’ve recreated the Apple iPad page using CSS3 Animations instead of the Sciptaculuos effects Apple was using:
http://www.visualmedia.nl/html5/ipad/
Compare the CPU usage – it doesn’t make any difference with the original.
Thanks for that example Tinus. For those of you checking out his example make sure to use Chrome or an CSS3 supported browser (doesn’t work for me in Firefox or IE). Both the Scriptaculous effect and the CSS3 consume a consistent 40% CPU. Is there anything we can do to make this perform better? Slideshow Pro can cross fade, run a sound track, show thumbnails and tons of other features all at less than 20% CPU on my machine (only 3% when not in the process of fading).
I think it’s because CSS3 animations are in their infancy. Apple already told us they want to use GPU acceleration to make it run fast, but if you ask me it just doesn’t run very fast because they rushed into supporting CSS3 animations and didn’t optimize for performance. They had to rush things just to keep the HTML5 train running.
Just like Javascript performance over the last two years, rendering performance will improve heavily in the years to come.
On my PC win-vista 32-bit flash hovered around 0-5% and HTML5 fluctuated between 10%-20%
On my macbook running leopard 10.5.7 HTML5 rests just a little above 20% and flash fluctuated between the upper 20th percentile and the lower 30th percentile.
Quite a big difference from vista.
Interesting test. I sort of like the easing on the JS version one a bit more personally.
I wonder how different (if at all) the results of this test will be once the spec for HTML5 becomes finalized. I was surprised though that even such a small swf file could cause my macbook to use up so many resources.