12

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?

agarcian
  • 3,909
  • 3
  • 33
  • 55
  • 1
    possible duplicate of [How can I optimize for IE?](http://stackoverflow.com/questions/4250815/how-can-i-optimize-for-ie) – Mike Samuel Jan 13 '12 at 05:26
  • The two top-rated answers of that question are pretty much the same advice that's applicable here, too. – Joey Mar 27 '12 at 06:12

4 Answers4

2

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.

Victor
  • 3,669
  • 3
  • 37
  • 42
1

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)

Oved D
  • 7,132
  • 10
  • 47
  • 69
0

I think reasonable solution for it is Google Chrome Frame
This just allow use Chrome Frame in IE and don't use it in non-IE browsers.

JavaScript performance and development tools for IE:
Microsoft Support: Internet Explorer Performance Article - http://support.microsoft.com/kb/982891

swift
  • 270
  • 2
  • 5
  • Yes, I am aware of Chrome Frame, however, what I am looking for is any kind of 'best practices' that will help with the development of faster javascript code to be run in IE. – agarcian Jan 19 '12 at 08:08
  • JavaScript performance and development tools for IE: [Microsoft Support: Internet Explorer Performance Article - http://support.microsoft.com/kb/982891](http://support.microsoft.com/kb/982891) – swift Jan 19 '12 at 17:17
0

a. One way to increase your performance in older versions of IE would be to use RAW JavaScript to create DOM elements instead of jQuery.

example - 

(function () {
  var rosterContainer = document.getElementByID("roster");
  var memberContainer = document.createElement("div");

  $(memberContainer).addClass("one_fourth alpha hentry")
                    .attr("id", mName.replace(/\s+/g," "))
                    .appendTo($(rosterContainer));
})();

b. You can also re-engineer your user experience (UX) for IE browsers.

Example - my site uses heavy JS/jquery plugins to load large backgrounds and show them as a slide show with alpha tweens. But for my IE users, I don't load the JS or the plugin or the background images - i just show a static titled bg.

you can use loaders like yepnope.js to load optimized JS for IE

c. Make sure your site's UI is fully functional w/o JavaScript. This is always a good place to start.

Rayraegah
  • 204
  • 2
  • 11