"HTML5" versus Flash: Animation Benchmarking

Interesting to see the variety of results people are getting here. If anyone is using the Flash 10.1 beta they'll probably find the tests never get above 60FPS due to alterations in the timing system from previous versions.<p>The one slightly misleading thing about this test case is I'm pretty sure canvas would fall behind quite quickly with a scene with more complicated shapes (understandably so, you have to call JS functions to redraw everything every frame, whereas in Flash you could draw once and then move objects around and let the renderer deal with it without the overhead of calling the drawing functions every time).

For me (Chrome on Linux and Windows) Canvas edged it. Flash had a slightly higher peak framerate (about 42fps) but it varied wildly (dropping to 25fps at times) and also paused a lot on Linux.<p>Canvas as consistently 38/39fps.

Going with the 500 particles / shadows on, link, I get results like these on Firefox 3.6.2 on Windows 7:<p><pre><code> 666 Flash 3.5 SVG (but I did not see shadows) Actual rate for SVG looked more like 0.2 FPS 13 Canvas </code></pre> I wonder if the Flash is hardware accelerated? I have a beefy graphics card, an AMD 5870.<p>For Chrome, the results are quite different:<p><pre><code> 110 Flash 43 SVG (still no shadows) 14 Canvas </code></pre> With the unadorned links:<p><pre><code> 17 HTML/Chrome 14 HTML/Firefox (between 25 and 14, GC? pauses) 85 Canvas/Chrome 40 Canvas/Firefox 40 SVG/Chrome 3 SVG/Firefox (again, looked more like 0.2) 100 Flash/Chrome 666 Flash/Firefox</code></pre>

I noticed something off - in Chrome on the Mac Flash never dropped below 40 fps while canvas and SVG never went over ~25 fps, but perceptually it seemed things are the other way around - canvas and SVG animations seemed smoother than Flash.<p>Has anyone else noticed anything similar?

Performance is only half the story...<p>As the comments show, different systems will have different performance benchmarks. Maximizing performance on your dev system doesn't guarantee performance for your users. A full test suite of all platforms and browsers and Flash versions, while possible, seems like a burdensome undertaking for most folk.<p>I'd spend a lot more time maximizing the performance of my underlying code than benchmarking which platform can edge out the other. If you NEED that edge, you can be sure that some systems out there won't cut it.

Opera 10.51 on Windows XP minimum fps:<p>HTML 23 Canvas 25 SVG 13 Flash 50<p>No contest here :-/

It's a pity he didn't throw Silverlight into the mix, it would make an even cooler benchmark.

I took a look at his Javascript code, in the "HTML" example, and it was far from as well written as it could be - I could easily do the same effect with a whole lot better framerate. I am not sure how fair a test this is.