5

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.

Michael Gaskill
  • 7,913
  • 10
  • 38
  • 43
Jon Artus
  • 6,268
  • 11
  • 42
  • 41
  • 3
    *"I've seen references to `.innerHTML()` being very slow"* On the contrary, assigning to `innerHTML` (which is a *property*, not a function; no `()`) is usually the fastest way to add content to a page, dramatically faster than using `createElement` and `appendChild`. This is because parsing HTML markup and turning it into displayed content is fundamentally *what browsers do*, and they're highly optimized to do it. In contrast, working through the DOM API requires multiple trips across the DOM/JavaScript boundary and requires that the browser map internal structures to the DOM equivalents. – T.J. Crowder Jun 04 '11 at 09:53

2 Answers2

3

Have a look at

Community
  • 1
  • 1
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Useful links thanks! I hadn't managed to find those blog entries and there's lots of great stuff there. – Jon Artus Jun 04 '11 at 10:46
1

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).

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • Thanks for that - I've started thinking about ways to degrade the experience in earlier versions of IE. I hadn't really considered animations either but you're right, I'll probably just disable them altogether in IE<9! – Jon Artus Jun 04 '11 at 10:45