Tips on optimizing javascript

Question

The things I'm trying to get my website to do are getting fairly complex, some of the things that need to be done take long enough that it gives visible delays.

Mainly, adding content to the document slows things down as well as jquery animations that I'm using.

I create elements using document.createElement("div") rather than just doing document.write(""), and the animations are the custom animation using .animation();

I'm wondering how I can continue to add content as I am but prevent the browser from freezing every time I want to add something.

Any suggestions for speeding things up so there is less of a delay? Tips on what to avoid in javascript programming that gives increased delay would be really helpful.

Thanks, Matt

Answer 1

This sounds more like you want to improve the DOM interaction performance rather than javascript, so in that vein:

• Yes, document.write is bad, it blocks additional loading (any JS executing before your pages has finished loading basically requires all other processing to stop -- modern browsers like Safari (and by proxy Chrome) and Firefox do a degree of content preloading in order to prevents loads from blocking but subsequent style resolution, etc is largely blocked.
• document.createElement is in general the best solution, although their are certain cases where just manipulating innerHTML on an element may be faster -- but that is not yet cross browser compatible (i think innerHTML doesn't exist till Firefox 3.5) and the perform characteristics are tricky.
• Reduce the amount of content you load initially -- eg. if you have lots of content (or content that requires large scripts) attempt to delay loading until after the initial page load has completed.
• Oh, for animations you should look at CSS animations and they perform much better than any JS implementations, but they're only present in Safari (and by proxy Chrome) and Firefox 3.5 -- definitely not in IE :-(

In terms of JavaScript performance, avoid with and getters/setters like the plague and you should be fine in most modern JS implementations.

Answer 2

JQuery is great for manipulating the DOM. I'd take a look at their code in order to get some ideas. Or, seeing how I'm way lazy, I'd just use their stuff.

In one of the podcasts Jeff Atwood mentioned you'd have to be crazy to write your own javascript... after using JQuery, I'd have to agree with him.

Answer 3

What surprises most people is that using innerHTML is, actually, the fastest way there is to manipulate the DOM.

You can see one benchmark here for example.