Flash / HTML Comparison

Friday, June 18th, 2010 | Blog

This comparison is very similar to the Flash/Canvas comparison with a minor change. The first Flash demo utilizes BitmapData to render the particles. Much like Canvas renders directly to a bitmap array. But I wanted to compare the speed versus HTML (animating with elements) and a Bitmap demo isn’t a fair comparison. So I have a second Flash demo that animated with Sprites. As with the previous demos, the particles are 1x1px white boxes to keep the look the same.

Another small change in these demos is that they increment by 10s instead of 100s. This is because it’s much more intensive to animate a sprite over a single pixel that really only exists when it’s finally drawn on the bitmap.

Also in an effort to let you see what the you can do with each, I’ve added controls to manipulate the minimum FPS. This will affect when the demos actually begin to throttle back.

Browser Particles Particles Added Per Render
HTML – Firefox 3.6.4 400 20
HTML – Chrome 6.0.437.1 800 30
HTML – Opera 10.60 Beta 800 30
Flash 10.0.45.2 6,000 220
Flash 10.0.45.2 Debugger 5,000 180
Flash 10.1.53.64 7,500 270
Flash 10.1.53.64 Debugger 6,500 230

* All results tested with a minimum FPS of 29

HTML Particle Speed Test

Flash (Sprite) Particle Speed Test

2 Comments to Flash / HTML Comparison

Mr.doob
July 8, 2010

It’ll be interesting to see how this evolves over the next few months with all the modern browsers implementing hardware acceleration.

Btw, nice work doing a 1:1 Javascript port of the Stats! Do you mind if I include it in the main repository?

http://github.com/mrdoob/Hi-ReS-Stats

Gabriel
July 12, 2010

Sure! By all means, it was yours to begin with =)

Leave a comment

Please upgrade your Flash Player To submit a comment, you must have Flash Player 9.0.0 or higher installed. I use a flash form here to help prevent spam.

Search