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).
| 100 | 250 | 500 | 1000 | 2000 | 4000 | Auto | |||
|---|---|---|---|---|---|---|---|---|---|
| W7 | PC | IE 9 | 60 | 60 | 60 | 60 | 60 | 42 | 2300~2800 |
| Chrome | 5 | 5 | 5 | 5 | 5 | 4 | — | ||
| Firefox | 60 | 59 | 28 | 14 | 7 | 3 | ~258 (~57fps) | ||
| Opera | 6 | 6 | 6 | 5 | 5 | 4 | — | ||
| HP | IE 9 | 60 | 60 | 60 | 60 | 43 | 22 | 1300~1500 | |
| Chrome | 4 | 4 | 4 | 4 | 4 | 3 | — | ||
| Firefox | 60 | 45 | 21 | 10 | 5 | 5 | 190~200 | ||
| Opera | 6 | 6 | 6 | 5 | 5 | 4 | — | ||
| W8 | IE 10 | 26 | 25 | 23 | 19 | 16 | 12 | 440~470 (53~55fps) | |
| Chrome | 4 | 4 | 4 | 4 | 4 | 3 | — | ||
| Firefox | 26 | 25 | 23 | 15 | 5 | 3 | — | ||
| Opera | 5 | 5 | 4 | 4 | 4 | 4 | — |
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 !
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…
Regardless that this is an MS-made demo, the performance is pretty great in IE (I’m running IE9 on Windows 7 64-bit). I got up to 45 fps with 500 snowflakes in both IE9 and FF 9, and only up to 5 fps in Chrome 17.0.963.12 dev-m and Safari 5.1.2. However, I would love to see this same demo optimized for Chrome and/or Safari (WebKit + Nitro/V8).
You can improve the performance in Chrome by enabling the “GPU Accelerated Canvas 2D” in about:flags page. Unfortunatelly it seems, that this kind of demos can not be optimized for other browsers than IE. IE at this time has the best performance using GPU acceleration (some demos of course will still work slower in IE).
About three weeks ago I had a presentation with my friend, where he presented some CSS/SVG animation demo on diferent browsers. The animation runned smothly only on IE – this is a sample, where you are not able to optimize the code/animation.