DHTML and JavaScript Performance Tuning

Using JavaScript

Use as Little JavaScript as Possible
Use External Scripts
Don't Use Eval

Use as Little JavaScript as Possible

As bone-headedly simple as this sounds, it is something you must keep in mind. JavaScript will slow down the loading of the page, and the delay is perceived by the user as longer than actual time.

Although JavaScript takes just as much time to download as css or html, it is interpreted by the browser as it is downloaded, and this takes even more time.

It is always important to stick to the goal of the code. Programmers tend to code in more flexibility and features than necessary and this can result in code bloat.

Use Defer

The defer attribute of the script tag indicates that the user agent may optionally defer interpretation of the script until after the page loads. In practice, this effect occurs in MSIE (Windows edition), but not in Mozilla 1.4 (bug 28293). The defer attribute should be used whenever possible so that the page will load faster (even if only in some browsers).
Use External Scripts

When our pages use scripts to perform common operations, we place these functions in an external js file. The script file will remain in the browser cache and will only need to be downloaded to users' machines once during their visit to your site. You can obtain the same benefits by placing your common style rules in a separate file.

Using external scripts and stylesheets improves performance, but that is not the greatest benefit of this technique. External scripts reduce maintenance costs.

Don't Use Eval

Ease

Effectiveness

Overall Practicality

M	IE	S	Op
10+	10	10	?

Eval code is the slowest type of code. It is always better to avoid using eval. Alternatives to eval are almost always clearer to read. If you find that it is necessary to use eval, then use it as little as possible.

If your use of eval returns a value that might be used again, then store that result in a local variable or cache it in an object.

Although using eval is much slower than not using eval for the same task, the performance difference varies greatly between browsers. It appears that Mozilla implements a weak cache (weak reference). My evidence for this claim is that Mozilla gets a little faster on subsequent runs of the same eval code.