Home >
One thing that drives me up the wall is seeing programmers copy a popular technique when it doesn't create the best code. Unfortunately, the complexity hidden by JavaScript frameworks, if you are using one, and the "cool" factor can hide inefficient programming.
I’ll use the $ function of the Prototype library as an example because many developers are familiar with it, and it is a pet peeve of mine. For those not familiar with it, the $ function encapsulates the built-in document.getElementById method. Part of its popularity is because it is easier to type a “$” than “document.getElementById.” It also provides some extra code, which is the point.
It is not uncommon to find code like the following.
$("warning").style.display = "block";
It looks good. It is short and concise. Now look at this next example that has the same result.
var elementIds = ["warning"];
var elements = new Array();
for (var i = 0; i < elementIds.length; i++) {
var element = elementIds[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (elementIds.length == 1)
break;
elements.push(element);
}
element.style.display = “block”;
Wouldn't you wonder what the programmer was doing?
The following single line does the job.
document.getElementById('warning').style.display = "block";
Let’s take a look at the $ function. The code is:
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
It can take any number of arguments that can be the string ID or a DOM object reference and returns an array of object references. It is perfect for getting references to multiple elements. But, all the code comes with it whether or not it is needed.
In most cases, however, all you needed is to get one object reference for a string ID. Using document.getElementById is much more direct.There may be cases where either an ID or object reference are passed; for example, a function that is called from several other functions some where the object reference already exists. Then the following two lines would be useful.
if (typeof element == 'string')
element = document.getElementById(element);
If these lines are needed frequently, then wrapping them in a function would be justified.
You might say the performance hit is less than a nano second, which is probably true. There are two extra objects created (a scope object and an array) as well as the overhead normally associated with a function call. All of which are normally not noticeable. However, inefficiencies like this accumulate especially if they are used in a loop. In highly dynamic interactive RIA sites, performance can become an issue and every little improvement will contribute to reaching acceptable results.
Have you come across similar issues? Or, do you feel that processor speed and cheap memory provide all the performance necessary? Let us know.
Tag Cloud
InsideRIA Conference
Learn more about the conference at http://training.oreilly.com/insideria/
Podcasts & Screencasts
Development Series
Get an overview of the tools and technologies that work together to allow developers to build Rich Internet Applications (RIAs) quickly and easily.
Facebook Application Development@InsideRIA on Twitter
Follow InsideRIA on Twitter
I feel that processor speed and cheap memory provide all the performance neccessary :-)
I am willing to trade A LOT for programmer efficiency and readability of code. Browser vendors are producing better and better JS engines, and focus is really on that at the time. I see it a bit like in the early days of Java. The JS VM is quickly growing up, and I expect us to not have to worry about this stuff.