
"HTML5" versus Flash: Animation Benchmarking - KevinBongart
http://www.themaninblue.com/writing/perspective/2010/03/22/
======
gb
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).

~~~
ThomPete
Exactly

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

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

~~~
jan_g
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.

~~~
ErrantX
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.

~~~
hackermom
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.....

~~~
gb
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_.

------
barrkel
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

~~~
pbhjpbhj
Athlon1.1GHz with 768MB running Kubuntu:

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

------
lurch_mojoff
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?

~~~
jcnnghm
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.

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

------
yread
Opera 10.51 on Windows XP minimum fps:

HTML 23 Canvas 25 SVG 13 Flash 50

No contest here :-/

~~~
endtime
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.

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

~~~
orc
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"

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

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

~~~
hackermom
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.

