Safari kicks ass, again

Sometimes, while at home, I really miss working so I bring work to home . So, this time was the turn of a cross-browser JavaScript madness, the problem manifests like this:

There's a grid, big one, in which each cell has 3 image/buttons, each image has 2 states and they are exclusive, as in Low, Med, Hi, get the picture? Well, when the grid gets big (my HTML file right now has about 20.000 lines) performance goes down a lot, that means that when a user clicks a button the state change takes a noticeable second to happen, in IE 6 and 7.

I didn't code that so I had no idea of what was causing the problem so I asked the guys working in that project to email me a static version of the page so that I had something to fill my evening with .

Besides the JavaScript in that page is painfully awful (I'm sorry guys, I had to say it) I managed to isolate the piece of code that was causing trouble. Many of you geeks might already be blaming some obscure for(;;) over every single element, or a diabolic recursion; well my friends this is not the case, or at least the for(;;) is not where you think it is, read on.

The offending code was merely a dozen of document.getElementById() calls. But wait, think about it, getElementById in 20.000 lines worth of elements, that's something we should handle more efficiently, well yes and no. Yes, you should narrow your element "universe" and work with subsets as much as you can, and also use CSS selectors to get your target. And No because the browser's engine could do us the favor of optimising it, can't it? That seems to be the case for Safari, whose performance is not affected *at all* by this experiment, and remains as snappy as always. Next in the podium is Firefox, whose performance degrades slightly, regarding the button state change, but fails terribly at the very beginning when it almost hangs up while loading the page. At the bottom of the podium (if any) there's IE6 which fails in every single aspect, and degrades much more with a much lesser number of elements.

Very well then, what have we learned with this? You have to code well, don't trust the browser's engine too much, Firefox is really good but it still has some issues and that IE6 sucks at rendering web pages and executing javascript code.

I just wanted to share my findings on this noble area of knowledge. Your comments are more than welcome.

Oh god, I really need a pint right now, make it a brown ale please.