Will you have a Merry Christmas with your web browser?

Two days before Christmas Eve makes you forget about all programming languages, design and architectural patterns or some other programming features. Let’s do something else for a change and take a look at how fast our web browser can draw… snowflakes!

Last year on my blog, I wrote a post comparing the load time of two web applications on different web browsers. The demo apps were made by Microsoft and are available at IE Test Drive.

Seriously, I was waiting to see what the IE Team made this Christmas. Happily, they made some other demo app – Let it snow. I am not that much interested in the demo itself, but in the results it gave using different browsers.

I’ve checked it by testing it on my Desktop PC (Intel i7 950 @3.07GHz, NVidia GeForce 460 GTX ) and my notebook (HP Tm2 Intel i5 U 470 @ 1.33GHz, ATI Radeon HD 5450 or Intel HD Graphics). I ran the tests also on Windows 8 which is installed natively on my notebook (with Intel graphic enabled).

The table above compares how many snowflakes (100,250, 500…) are drawn in the browser and how many frames per second the browser needs to draw them all. I used the newest available web browsers versions: Chrome 16.0.912.63, Firefox 9.0, Opera 11.60, IE 9 and IE 10 PP4).

The results are quite amazing on IE browsers. Well, honestly I am not really surprised, but this is also a proof that the browsers differ even if they are HTML5 ready. For sure some other demos made by Google will work faster on Chrome than on other browsers – just write Let it snow in google.

Some of the results are really interesting. Why IE 10 PP4 with 250 snow flakes runs slower than the automatic setting which draws approximately 450 snow flakes under 55 fps? You can also see the difference between the performance depending on the used graphic card. IE runs significantly slower under Windows 8 with Intel graphics card than under Windows 7 with Radeon graphics running. Another problem is, that only IE and Chrome play the sound in the background.

How does this amazing demo work ?

The sound in the background is played with an audio tag. It uses an mp3 file which can be played in Chrome and IE9+ browsers at the moment (you can hear it by downloading the soundtrack). The fancy graphic with snowflakes is painted on a canvas and it uses requestAnimationFrame  to draw the snowflakes. The snowman and the board are png images. The growing snow heap is an svg path object. Once the board is covered with snow (for this a separate canvas is used), you can brush off the snow by a mouse or touch (if you have a touch enabled PC – like Windows 8).  It’s so simple and can give so much more fun.

Easter egg inside !

Let It Snow IE Demo Easter Egg

By pressing a secret key (it’s F3 – but probably you need to modify the code through the developer tool bar) the graphics and music changes into this soundtrack. You can see the easter egg graphic on the screen which I made.

Take a look at the demo. How many snowflakes does your browser draw? What browser and operating system are you using? Let us know, let us know, let us know…