Optimizing for Internet Explorer

Question

Hi,

Being a web developer I have noticed that anything I create works absolutely great in all browsers, but always always always has a speed issue in Internet Explorer. Please note I am referring to speed, as I always take care that it displays and works across all browsers.

Is there anywhere, or does anyone have, good programming tips for internet explorer? I mean how to do things, so as that it's more or less optimized for internet explorer.

I mean my latest example is that I return JSON data from DB (via AJAX) and then I build the page with the results. The response from the server is minimal, and it loads instantaneoulsy in aaaaall browser, but takes 5-10 seconds in internet explorer depending on OS and ie version.

I am lost for words, and I was just wondering if there's anything I can do.

Examples: http://msdn.microsoft.com/en-us/library/ms533019(VS.85).aspx http://www.quirksmode.org/dom/innerhtml.html http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/

-theo

Answer 1

You could use dynaTrace AJAX Edition to profile your site in IE to see what is slowing it down.

Answer 2

Short answer: don't use DOM methods like document.createElement("div") in IE to create markup. Build your HTML with strings instead.

If you must use DOM methods, make sure you don't add elements to the page more than once. That is, create a main container to which everything is added, then as a final step call document.body.appendChild("div") (where "div" is your main container). That minimizes the amount of rerendering that will go on.

Answer 3

Javascript performance in IE is currently the worst among all of the popular browsers. The suggestion to use IE as your baseline for performance is well grounded. I'll add that using an accepted js/ajax library (jQuery, YUI, etc.) will ensure a lot of browser-specific optimizations have been done and heavily tested for you.

If you are doing a lot of custom js in your web application and are just looking for some best practices, I can recommend a few websites: jspatterns.com, IE + JavaScript Performance Recommendations. This is a good chance to plug Douglas Crockford's Javascript: The Good Parts for general js zen.

Answer 4

Any DOM manipulations are always costly(Adding element, removing element). So you can actually minimize the DOM operations it can be done by keeping hidden elements on the page and tweking there visiblility.

I think this is something worth visiting.

Answer 5

When building a page in IE 6 I ran into a similar issue and ended up doing pure string concatenation to get performance to be acceptable. My first attempt used jquery (1.2.6 at the time) to build the elements and add attributes but it proved too slow. Manually building the html as a string and then setting the innerHtml property on an element to display the table was much faster. jQuery 1.4+ with regards to IE6 is much much faster so this may not hold true anymore.

Using intermediate strings in the for loops seems to have a performance boost as well, ie don't just keep using "+=" on one big string. In the for loop have a string for the table row and append that to the big string on each loop. This might be something to try.

I have run into 2 issues with IE6 with regards to performance as well: - Switching css classes is slow in IE6, it's better to set, for example, the background color in the style attribute for an element. - If you are doing mouseovers on tr or td tags in a table this will work fine in all other browsers except IE. You have to handle the mouseover and mouseout events at the table level and find the tr or td tag that was the source of the event and do any behavior at this point.