redredred

Writing efficient Javascript doesn’t really seem to matter too much while you are trying to make something work. Mostly people don’t take Javascript too seriously and more often than not just hack something together that works regardless of other considerations… or maybe that’s just me

When you are writing Javascript that will be re-used and is likely to be called on a page multiple times, and that page grows and grows, suddenly you can find yourself with a web page which performs like a dog and most likely leaks to boot. I have had a few experiences like this and after writing the validation framework for the Spring Layout tags I have had an opportunity to revise my style and I thought that I would articulate a few principles here that have greatly aided me in writing efficient Javascript.

1. When accessing form variables, use the form field collection rather than the DOM. It is tempting to just use the prototype $ function all the time but it is extremely inefficient compared to getting the field from the forms field collection or better still getting a reference from the event source.
2. Use methods like addEvent(…) sparingly. Most people, these days add Javascript events dynamically using some wrapper to genericize the method for IE and Mozilla. This is a good practice, but if a lot of methods are going to be added to an event it can become quite heavy weight. Consider aggregating functions whenever possible to make this more efficient.
3. Always declare a local variable for calculated values or functions like document.forms[0] which are going to be re-used in a function. Javascript does very little optimization for you and particularly in loops it can become very expensive re-calling functions or accessing data members over and over so you need to declare a local variable using the var keyword for anything you are going to re-use.
4. Loops which are implemented ineficiently in Javascript can be very expensive indeed. A number of basic principles should be employed when writing loops see this article for an in depth analysis but I will sum up the major points here.

• Minimize if statements within a loop, switch statements are far more efficient in Javascript however if you must use if statements combine them whenever possible to reduce the number of distinct statements as every if must be tested even if an earlier one evaluates to true.
• Loop backward whenever practicable using loops iterating on index– is surprisingl much more efficient than index++ and –index is even more efficient particularly when you use a do/while loop rather than a for loop (the figures for the speed difference are staggering, check the link above)
• Obviously, remove invariant code from the loop, anything which can be calculated once before the loop should be.

I will keep adding to this entry as I have the time. I encourage others who have tips on this topic to post them here as comments.

Last week we deployed the first public release of the Spring Layout project. The project homepage is at sourceforge and is now available for download. I am looking forward to feedback from other developers and getting feedback from users.

I am currently working on the datagrid to enable multiple entries to be added without a post and writing a roadmap document so that we keep a coherent direction for future development.

Thanks to Groupware for providing time for developers to work on this framework.