Seb Lee-Delisle

Menu

Battle of the Browsers


image by Andi Smith

I had a great time at the State of the Browser conference in London on Saturday – it was nice to see representatives from FireFox, Chrome, Opera and MSIE all getting along so well.

Getting along well is all nice and stuff, but isn’t it more fun if there’s a bit of tension? So to stir things up a bit I live coded a fun but completely irrelevant test that would pit the browsers against each other and stretch them to their limits.

It’s based on this micro tutorial on CreativeJS.com and works on a pixel level, directly manipulating the 2D canvas data to render pixel particles.

Although it was a completely unfair test (I even cheekily ran IE in a VM as punishment for not making a cross platform browser 😉 ) it’s still kinda astonishing that JS can render millions of particles without catching breath.


image stolen from the Mozilla blog

When asked, most people assumed that Chrome would be fastest, but it was actually FireFox that won the challenge with around 3.6 million particles. This is most likely because they’ve implemented typed arrays in their canvas image data object (coming in the next Chrome, apparently).

Run the test for yourself here and play with the code on JSBin. Keep the mouse pressed until the red bar hits the right hand side (Which means we’re running at 5 fps).

For sensible write ups of the event that mostly ignore irrelevant particle tests :

Mozilla
UBelly
Remy Sharp
Andi Smith

This entry was posted in HTML5 Canvas, Particles, Speaking. Bookmark the permalink.

5 Responses to Battle of the Browsers