❯~/pixelastic

Javascript speed tip: reduce variable lookup

It appears that, according to this video, when inside a Javascript function (or closure), if you want to access a variable, the closer your scope is to this variable, the faster you'll get it.

In simpler words, accessing a global variable (like document, or window) from inside a function will always be slower that accessing a locally defined variable.

It also means that, when inside a method of an object, accessing a variable defined in this method will be faster that accessing a property of the parent object, which itself will be faster that accessing a global variable.

So, for example, if you need to access at least twice a global variable like window or document in a method, you'd better cache it in a local variable first.

function myTestFunction() {
  var button = document.getElementById('button');
  var header = document.getElementById('header');
}

is bad and could be rewritten as:

function myTestFunction() {
  var doc = document;
  var button = doc.getElementById('button');
  var header = doc.getElementById('header');
}