IE7/8 Javascript Gotchas

Question

I've built a little one-page intranet app which is pretty Javascript heavy. It runs beautifully in Chrome and Firefox, but as soon as you load it in IE7/8 the interface becomes extremely sluggish. It has various jQueryUI widgets such as draggables and resizable panes and once you start to click and drag, the frame rate drops into unusable territory.

Before I try to make sense of the IE8 developer tools, are there any known gotchas in the IE7/8 script engines which I can check for in my code? I've seen references to .innerHTML() being very slow, but I don't know if there are other things I should be looking for.

Answer 1

Have a look at

• How to find slow-down in Javascript in IE6
• IE + JavaScript Performance Recommendations - Part 1
• IE + JavaScript Performance Recommendations - Part 2: JavaScript Code Inefficiencies
• IE + JScript Performance Recommendations Part 3: JavaScript Code Inefficiencies
• http://www.quirksmode.org/dom/innerhtml.html

Answer 2

Javascript engines in older browsers are very slow in general. Only the latest versions of most browsers do have a faster engine. FireFox4, Chrome 11 and IE9 are all very fast, while anything before Chrome 10 and Firefox 3.5 is slow as well. Unfortunately, while FF en Chrome update (near) automatically, IE users apparently feel an urge to cling to their old versions.

That said, I don't know of any specific slow features that you may look for, but I doubt if it would help you at all to look for them.

You might gain more if you decide to use different animations on slower browsers (and slower PC's too). You could choose to resize and drag empty divs with just a border, and position the real div on the right spot after dragging. Maybe you could try to black box this, so the browser automatically switches to this stub-mode if it is of a slower kind, or even if you measure bad performance (could be that your user is using Chrome 11 on slow hardware too).