6 ms·

"HTML5" versus Flash: Animation Benchmarking

52 points by KevinBongart 17y ago

ErrantX 17y ago
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 17y ago
  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 17y ago
    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 17y ago
      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 17y ago
        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.
yread 17y ago
Opera 10.51 on Windows XP minimum fps: HTML 23 Canvas 25 SVG 13 Flash 50 No contest here :-/
- endtime 17y ago
  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.
- CoryMathews 17y ago
  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.
lurch_mojoff 17y ago
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 17y ago
  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.
hackermom 17y ago
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.
- ilitirit 17y ago
  I suppose the same could be said about the Flash code.
- chadaustin 17y ago
  Would you like to go into specifics and teach us something?
  - hackermom 17y ago
    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 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.
barrkel 17y ago
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
- gb 17y ago
  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.
- pbhjpbhj 17y ago
  Athlon1.1GHz with 768MB running Kubuntu: FF+html: 2.5; +canvas: 4; +svg: 1; +flash: 15fps
gb 17y ago
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 17y ago
  Exactly something like this www.audiotools.com would not even be possible in canvas me thinks.
CWIZO 17y ago
It's a pity he didn't throw Silverlight into the mix, it would make an even cooler benchmark.
- snippyhollow 17y ago
  I see what you just did!
- orc 17y ago
  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"
synnik 17y ago
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.

52 points by KevinBongart 17y ago

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 17y ago
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 17y ago
  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 17y ago
    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 17y ago
      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.

yread 17y ago

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

endtime 17y ago
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.
CoryMathews 17y ago
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.

lurch_mojoff 17y ago

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 17y ago
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.

hackermom 17y ago

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.

ilitirit 17y ago
I suppose the same could be said about the Flash code.
chadaustin 17y ago
Would you like to go into specifics and teach us something?
- hackermom 17y ago
  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 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.

barrkel 17y ago

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

gb 17y ago
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.
pbhjpbhj 17y ago
Athlon1.1GHz with 768MB running Kubuntu: FF+html: 2.5; +canvas: 4; +svg: 1; +flash: 15fps

gb 17y ago

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 17y ago
Exactly something like this www.audiotools.com would not even be possible in canvas me thinks.

CWIZO 17y ago

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

snippyhollow 17y ago
I see what you just did!
orc 17y ago
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"

synnik 17y ago

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.