How expensive are JS function calls (compared to allocating memory for a variable)?

Question

Given some JS code like that one here:

  for (var i = 0; i < document.getElementsByName('scale_select').length; i++) {
    document.getElementsByName('scale_select')[i].onclick = vSetScale;
  }

Would the code be faster if we put the result of getElementsByName into a variable before the loop and then use the variable after that?

I am not sure how large the effect is in real life, with the result from getElementsByName typically having < 10 items. I'd like to understand the underlying mechanics anyway.

Also, if there's anything else noteworthy about the two options, please tell me.

Answer 1

In principle, would the code be faster if we put the result of getElementsByName into a variable before the loop and then use the variable after that?

yes.

Answer 2

I think so. Everytime it loops, the engine needs to re-evaluate the document.getElementsByName statement.

On the other hand, if the the value is saved in a variable, than it allready has the value.

Answer 3

Definitely. The memory required to store that would only be a pointer to a DOM object and that's significantly less painful than doing a DOM search each time you need to use something!

Idealish code:

var scale_select = document.getElementsByName('scale_select');
for (var i = 0; i < scale_select.length; i++)
    scale_select[i].onclick = vSetScale;

Answer 4

Use variables. They're not very expensive in JavaScript and function calls are definitely slower. If you loop at least 5 times over document.getElementById() use a variable. The idea here is not only the function call is slow but this specific function is very slow as it tries to locate the element with the given id in the DOM.

Answer 5

A smart implementation of DOM would do its own caching, invalidating the cache when something changes. But not all DOMs today can be counted on to be this smart (cough IE cough) so it's best if you do this yourself.

Answer 6

Caching the property lookup might help some, but caching the length of the array before starting the loop has proven to be faster.

So declaring a variable in the loop that holds the value of the scale_select.length would speed up the entire loop some.

var scale_select = document.getElementsByName('scale_select');
for (var i = 0, al=scale_select.length; i < al; i++)
    scale_select[i].onclick = vSetScale;

Answer 7

@ Oli

Caching the length property of the elements fetched in a variable is also a good idea:

var scaleSelect = document.getElementsByName('scale_select');
var scaleSelectLength = scaleSelect.length;

for (var i = 0; i < scaleSelectLength; i += 1)
{
    // scaleSelect[i]
}

Answer 8

There's no point storing the scaleSelect.length in a separate variable; it's actually already in one - scaleSelect.length is just an attribute of the scaleSelect array, and as such it's as quick to access as any other static variable.