When thinking about optimizing your web application, something to consider is javascript and css compression. There are a few good javascript and css compressors, one you can use for free online is http://www.creativyst.com/Prod/3/. However these can obfuscate your code so that it isn’t readable. Sometimes that is the goal, but for projects in which you want to keep your code readable there are other methods to keep your code smaller.

The Problem

Javascript is a white space insensitive language.

alert('foo bar');

will do the same thing as

alert(            'foo bar'                    );

Javascript doesn’t care that there are 32 spaces in between the parenthesis, it will process the code as if there were no spaces. Now this example may look funny and probably wouldn’t happen in a real application. However what would happen (and usually does for good reason) is spaces to indent your code to keep it readable (its beyond the scope of this article to talk about code indentation so i’ll just assume that you already know what that means). There are three main types of white spaces: carriage returns, spaces and tabs. It usually takes several spaces to make up one tab and tabs are typically used to indent your code. What you may not know is that sometimes editors will convert tabs to spaces. Why is this bad? When a web browsers requests a javascript file (or any file) from a web-server, the web-server sends a series of bytes over the TCP connection between the browser and server. The more bytes the server has to send, the longer the download, the more resources required from the server, and the slower the rendition time in the browser. A tab and a space ‘costs’ 1 byte. If a tab is converted into a space by your editor that 1 byte is converted into many bytes, which means you have more bytes sent over the ‘wire’. So how can we avoid this?

The Solution

Have your editor display white-spaces so that you have more control over what is being sent from your web-server.

The most popular IDE’s out there these days are Eclipse and Visual studio, so I’ll give examples from them. In visual studio simply press the hot-keys ‘CTRL+r’ and then ‘CTRL+w’. The first set of hot-keys tells visual studio to run a command. The second set of hot-keys tells visual studio to display white spaces. When your done visual studio now displays tabs as ‘→’ and spaces as ‘.’.

To keep visual studio from converting tabs into spaces, go to ‘Tools -> Options -> All Languages -> Tabs’ and select ‘Keep Tabs’ option.

In Eclipse go to ‘Window -> Preferences -> General -> Editors -> Text Editors’ and un-check the ‘Insert Spaces for Tabs’ check box and check the ‘Show Whitespace Characters’ check box.

This will display white space characters in the eclipse editor.

Conclusion

While it may not seem like having a few extra spaces in your javascript file will really make that much of a difference, it can actually make a huge difference in download speeds when your javascript files start getting very large. Another thing to consider is that when you start getting more and more hits on your website your server has to dish out more and more.

Tags: Eclipse, Javascript, Visual Studio

This entry was posted on Saturday, June 21st, 2008 at 6:37 pm and is filed under Browser Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.