Javascript performance in IE and FF

I was working on a page recently that displayed a number of items for a user to choose. Visually, it displays as a long list, with checkboxes and descriptive text.

The user has the option to select/deselect all items on the page. I was doing stress testing of the page, as the client had told us there could be up to 4000 entries on the page. Don’t worry, this page will be re-designed, but for now…

I was testing in Firefox, and selecting/deselecting all items was very quick. I then tested in Internet Explorer, as our client’s mandated browsers are Internet Explorer 6 and 7 and Firefox 2.

I have IE 8 installed, and it was taking 10-12s to select/deselect all. I then asked one of my co-workers to attempt it with IE6. IE6 timed out!

Needless to say, this is unacceptable performance.

Time to dig into the javascript.

Here’s the original code:

var count = 0;
var checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
	var element = checkboxes[i];
	if (element.type == 'checkbox') {
		++count;
	}
}

The page doesn’t have much code outside of the long list, but I had to do something, so the only thing I could see was getting the ul that contains the list items, rather than searching the entire document. So, here’s the modified code

var ulField = document.getElementById("permission.list");

var checkboxes = ulField.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
	var element = checkboxes[i];
	if (element.type == 'checkbox') {
	        ++count;
	}
}

Basically, retrieve the ul, and then search within it.

That one minor change made it so that even in IE6, the select/deselect all on 3000 items has a negligible delay.

Moral: Be as specific as possible as soon as possible, even if it doesn’t seem like it should make a difference.
Moral2: Internet Explorer’s javascript engine is slow….

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply