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 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 :

Remy Sharp
Andi Smith

5 replies on “Battle of the Browsers”

haha you really wanna open that can of worms? 🙂 If it’s a serious question, well historically, Flash has been very bad at doing pixel level manipulations. But then if you wanted millions of particles you’d probably use alchemy or Stage3D. So it’d be difficult to do a like-for-like test.

Thanks for the link, and thanks doing for the breakout session too!

I’ve been playing with different particle effects since Saturday’s conference, having lots of fun.

I love FireFox, but honestly I assumed that Chrome would be fastest… Gladly FFox holds the tron! 🙂

Comments are closed.