"HTML5" versus Flash: Animation Benchmarking | Hacker News Reader

"HTML5" versus Flash: Animation Benchmarking

themaninblue.com

52 pointsKevinBongart23 comments

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.

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).

Exactly

something like this www.audiotools.com would not even be possible in canvas me thinks.

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.

Canvas as consistently 38/39fps.

Similarly for me, flash varied (from 20 to 50fps) with pauses, in chrome on linux. Canvas & html both around 40fps, svg slighlty lower. Based on my experience, I would rule out flash, but since majority of users are on win or osx I second the author that flash is probably best choice for him.

I actually had the 'pauses' on Windows using Firefox 3.6 as well. So it's not 100% cut and dried - but, I think his conclusion (use Flash, but Canvas is a growing alternative) is good.

I think his conclusion should be taken with a big grain of salt, because, if you look ahead, to the inevitable future, Flash will probably not be anywhere close to as big an actor as it is today, while Canvas will without doubt grow and grow. But I guess if time stood still, which seems to be the case with most Flash protagonists.....

I'm not sure anyone is arguing Flash will be better forever, it's just at the moment everyone is getting excited about Canvas even though it's not a viable replacement in most situations yet.

Going with the 500 particles / shadows on, link, I get results like these on Firefox 3.6.2 on Windows 7:

    666   Flash
      3.5 SVG (but I did not see shadows)
          Actual rate for SVG looked more like 0.2 FPS
     13   Canvas

I wonder if the Flash is hardware accelerated? I have a beefy graphics card, an AMD 5870.

For Chrome, the results are quite different:

    110   Flash
     43   SVG (still no shadows)
     14   Canvas

With the unadorned links:

     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

Flash does have hardware acceleration support, but it wouldn't be helping in this situation. It actually makes things slower in most cases apart from video playback.

Athlon1.1GHz with 768MB running Kubuntu:

FF+html: 2.5; +canvas: 4; +svg: 1; +flash: 15fps

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.

Has anyone else noticed anything similar?

I noticed the same thing. I was getting ~70fps in the flash version, but it looked like it was stuttering and dropping frames. Try the link at the bottom that's rate limited to 25fps. It appears very smooth.

Performance is only half the story...

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.

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:

HTML 23 Canvas 25 SVG 13 Flash 50

No contest here :-/

I'm using Opera 10.51 on Windows 7 (Boot Camp), on a 2006 Macbook Pro, and canvas was competitive with Flash. Canvas started at 30 and Flash at 60, but both quickly converged to 45...and there was some minor stuttering with Flash.

with Opera 10.51 on Vista it was about the same. But there was no difference between flash/canvas/html on the smaller end all 25. But as the numbers grew the difference became noticeable. But the number reported did not reflect how smooth the animations were. so there must have been something wrong with how the numbers were gathered.

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

I see what you just did!

Yes. I was pretty astonished by this comment: "At the moment I can see 3 viable alternatives to Flash for animation: HTML, Canvas and SVG"

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.

I suppose the same could be said about the Flash code.

Would you like to go into specifics and teach us something?

I think the general rant I'd throw comes down to the fact that this guy is a "software engineer". He constructs code as if he was designing a mechanical machine, which is just awkward and inefficient. Don't get me wrong on the whole "software engineering vs programming" thing, but I discern good, fast, efficient code from bulky, clunky (but still working) code; you can't "drive car" with a sailing yacht, you can't "breakdance" the Waltz, and you can't go "industrial engineer" on programming - sure, it'll get you somewhere, but it's just not the best way for the end purpose's fullest efficiency - AND EFFICIENCY MATTERS.

Play with this a bit: http://pastebin.com/wauSARbt

1000 plots, averages to 35 fps on my 2.25ghz Macbook on Safari 4.0.3, and this requires more computational power per object plotted than a smart version of the "bouncing balls" effect he tries to do.

Reply on news.ycombinator.com