Internet Explorer的Javascript优化

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

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 )

Answer 2

Another couple of common solutions:

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

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

use

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

Cache frequently used objects from outer scope. Eg 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 3

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

Answer 4

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.