DHTML and JavaScript Performance Tuning

Avoid document.write()

Web sites and applications must have clearly defined roles for each aspect. JavaScript is for behavior, not for generating content.

There are three problems with using document.write: poor accessibility, bad design, and slow performance. Lets take a look at these.

  1. Not Accessible to non-JavaScript browsers

    You may not care all that much about people with non-JavaScript enabled browsers, but I bet you do care about your Google™ rankings.

  2. Poor design and bad separation of logic

    Not all content writers and translators are JavaScript programmers (though I know a few). If one of these types has to edit a bunch of s += "<a href='", he won't be very efficient (or happy).

  3. Slow

    So you don't care about logical design because you maintain everything (bad design = job security) and you could care less about search engine rankings, but how about the performance?

    A document.write usually takes about 50% longer than static HTML, but don't take my word for it. Test yourself and make sure you hit reload a few times.

    Demo ->

    large html

    Static HTML page. How long does it take before window.onload fires?

    Demo ->

    large document.write

    This example uses document.write to create the same content. (takes between 50%-150% longer than the first example)

Generally speaking, you should not use JavaScript to generate content.

Now that we've gotten that out of the way, let's take a look at how we can make the JavaScript run faster.

Next in this tutorial:

 

Tags

Archived Scripts

*AnimTree
*Tabs
*GlideMenus
*DragLib