Design Levels

A hierarchy of optimization levels exists for JavaScript, what Bentley and others call design levels. ^[6] First comes the global changes like using the right algorithms and data structures that can speed up your code by orders of magnitude. Next comes refactoring that restructures code in a disciplined way into a simpler, more efficient form ^[7] ). Then comes minimizing DOM interaction and I/O or HTTP requests . Finally, if performance is still a problem, use local optimizations like caching frequently used values to save on recalculation costs. Here is a summary of the optimization process:

^[6] Bentley, Programming Pearls .

^[7] Martin Fowler, Refactoring: Improving the Design of Existing Code (Boston, MA: Addison-Wesley, 1999).

1. Choose the right algorithm and data structure.

2. Refactor to simplify code.

3. Minimize DOM and I/O interaction.

4. Use local optimizations last.

When optimizing your code, start at the highest level and work your way down until the code executes fast enough. For maximum speed, work at multiple levels.