Javascript optimizations for Internet Explorer

Question

It is well known that the Internet Explorer Javascript Engines are way behind in terms of performance, in particular IE 8 and older, when compared to Chrome, Safari (Webkit) or Firefox (Mozilla).

When developing a web application with significant javascript functionality, IE performs much worst than the others.

Are there any practices that could help improve your javascript code so the divide between the good performers (non-IE) and the bad performer (IE) is not that wide?

Answer 1

Another couple of common solutions:

Cache frequently used DOM nodes, do not recalculate them in the same function again. E.g. instead of

$(id).parentNode.something();
$(id).parentNode.somethingOther();

use

var e = $(id).parentNode;
e.something();
e.somethingOther();

Cache frequently used objects from outer scope. E.g. instead of

if (this.options.type == 'a') {
    // ...
} else if (this.options.type == 'b') {
    // ...
}

use

var type = this.options.type;
if (type == 'a') {
    // ...
} else if (type == 'b') {
    // ...
}

This will have also positive impact on code size before and after minifying.

Answer 2

One common way to optimize performance is caching the 'max' value in for loops.

So, let's say you have to iterate through an array called sampleArray. You could optimize the below statement:

var sampleArray = [3, 10, 12, 5, 9];

for(var i = 0; i < sampleArray.length; i++){
   var currentElement = sampleArray[i];
  // so something wit element
}

by changing it to be:

for(var i = 0, max = sampleArray.length; i < max; i++){
       var currentElement = sampleArray[i];
      // so something wit element
}

This has shown to show a pretty big performance increase in all browsers. In particular, IE7 has proven to get a 190 times increase in performance using this pattern (from High Performance Javascript)