DHTML and JavaScript Performance Tuning

[ Introduction ]
[ Designing for Clarity ]
[ document.write ]
Performance Design
[ Using JS ]
[ Objects ]
[ Loops ]
[ Strings ]
[ Variables ]
[ Animation ]
[ DOM & XML ]
[ Conclusion ]

Designing for Performance

Designing with performance in mind is the first step to making our JavaScript run faster. The benefits of efficient design will outweigh the benefits of minor adjustments to code fragments.

Designing for performance means taking advantage of the language in such a way that the code will be understandable (human efficiency) and logically efficient (programmatic efficiency). In object oriented languages, this includes code reuse, encapsulation, and using design patterns appropriately.

Human Efficiency vs. Programmatic Efficiency

Many people feel that there is a trade off between human efficiency and programmatic efficiency. In some cases, it is true.

Ideally, we should strive for both types of efficiency in our JavaScript programs. JavaScript gives us the benefit of being an object oriented language, but the detriment of being a slow interpreted language. Ideally we must write an efficient program that is clear and understandable. Anything less than that is a failure.

Optimize While Coding

It is not bad to get into the habit of judiciously applying performance-tuning techniques as we code. For example, It will sometimes make sense right away to use a local variable when we know without question that that variable will be referenced several times within the scope we are working in.

I realize this seems to go against Jackson's rules of performance optimization, However, writing efficient code from the start may (in some cases) result in tighter code and even save time in the long run.

Jackson's rules of performance optimization:
Rule 1. Don't do it. Rule 2 (for experts only). Don't do it yet - that is, not until we have a perfectly clear an unoptimized solution.

The nature and intent is to write efficient algorithms and subroutines, test them, and create sensible, maintainable design and structure.

Test Often

As we add interactivity to our pages, we notice that they tend to slow down noticeably, sometimes unacceptably so. This slowness might occur in all browsers, or it may occur in only one browser. It may be that there is a tradeoff where a code change may boost performance in one browser and lower performance in another browser.

When developing a script, it is best to test code changes frequently in as many browsers as possible.

Testing is an integral part of both performance tuning and refactoring. By testing the script continually, we get instant feedback. Will the new code work in IE? Will it slow down in Mozilla? Testing provides the most reliable answers to questions such as these.

Testing is done by keeping one or two sample pages loaded in multiple browsers and then reloading each browser window. For this to be effective, browser cache preferences should be set to 0.

Tips

All of the tips discussed here are taken from a standpoint of developing clear and maintainable code as first and foremost. Techniques which obfuscate the code are not included. If you are reading this article for the purpose of learning how to make your JavaScript run faster, you will inevitably learn some excellent JavaScript code design skills.

Enough already! On to the tips (click next).

Next in this tutorial: Using JavaScript

AnimTree

Tabs

GlideMenus

DragLib