Cache vs. getElementById()

HTML and CSS XSLT JavaScript Images Soft Etc

	Task:	Reduce the number of `getElementById()` calls.

Function getElementById() is used relatively often, but if the page has many elements that need to be retrieved, it appears way too slow.

Here is an infallible method to deal with this. First, create an array with most queried element ids. Instead of calling getElementById() directly

for (var c = 0; c != 1000; c++)
{
	var Span = document.getElementById ('ID' + c);
	Span.className = Span.className == 'b' ? 'a' : 'b';
}

make an array containing references

function BuildCache()
{
	Cache = new Array();
	for (var c = 0; c != 1000; c++)
		Cache[c] = document.getElementById ('ID' + c);
}

and use it as you go:

for (var c = 0; c != 1000; c++)
{
	var Span = Cache[c];
	Span.className = Span.className == 'b' ? 'a' : 'b';
}

For example, we needed it to speed up our increment search page. All went well without cache until the number of items exceeded 600-700.

Outside the web

In computer science data structures used to replace a runtime computation with a simpler lookup operation are called lookup tables. Combined with other tricks (maths and algorythms), it can enable to execute calculations thousands of times faster.

Recolor one thousand stars to see the gains cache brings (speed difference is apparent, but the scrupulous kind may increase the number of dots and note down the time). Cache fills up with the click of the button.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Speed gains are the most significant for MSIE. In Safari and FireFox the time is almost the same. And Opera did best. It can iterate through the elements without cache as fast as MSIE does using it.

Order a design...

Cache vs. getElementById() 13 January 2006