Monday, August 30

JS Prototype Tutorial

5 Ways to Speed up Javascript

One big problem the entire internet suffered from when Macromedia Flash became popular, was that people were overusing this new exciting technology, and the overall performance of their site was far too poor. Sadly, we are starting to see a similar pattern as Javascript libraries like Prototype, JQuery, MooTools, Scriptaculous, etc. Sites are looking great, but the effects, though relatively light-weight, are getting cluttered, which slow down the page load, and the results are at times counter-productive.

In this JS tutorial, we’ll talk about a needed subject, which will benefit both the site owner and users. This subject is Javascript Speed up techniques.

1. External File Cache

The first thing I have seen many programmers take for granted is the browser’s ability to cache code for them. Caching code has many benefits that some people don’t realize. For one thing, if you store your Javascript on your user’s machine, you don’t have to download it every time the user requests it. If the user doesn’t have to download something, the page load will be faster – obvious. The down side of this could be the fact that if you change the code too often, then the Javascript your user has cached will be different. This is especially bad if the cached js has bugs in it, and the new code you deploy is a patch to it.

Overall, caching your Javascript is a best-practice to be observed. The way you cache your scripts is to store it in an external file and link it in to your main HTML file by using the following syntax:

<script type="text/javascript" src="file-name.js"></script>

Make sure you place this line of code inside the head of your HTML document. If this code is not placed within your <head> and </head> tags, the document will not validate with the W3C. This takes us to the next tip to help you speed up your javascript.

2. Code Placement

Some people have suggested that a good way to speed up your code is to place it at the end of your HTML document. This makes some sense, and can be confusing since Google specifically instructs webmasters to place the Google Analytics code just before the closing </body> tag. The reasoning behind adding Javascript to the end of your file is that everything else (images, CSS, text, etc.) can load first, so while the js script is loading, the user can still see everything else on the page (the main reason they visit your site for). However, placing the code at the end of your file won’t allow you to cache the file.

The solution is to add the code to the <head> portion of your file through an external file. If the script loading interrupts the rest of the page load, you may need to change your design structure. Abstracting your code into classes and functions will keep the code from loading unless you tell it to. Any code that you do need loaded automatically can be called on your document’s onload event. This way the code will be loaded only after the rest of the file is loaded, and it will still be cached. In libraries like Prototype or JQuery, you can use the document.ready() function.

3. Reduce HTTP Requests

A simple analysis of a regular page load reveals that most of the loading time of a web page is spent sending and receiving HTTP requests to and from the server. The immediate solution to this, simply enough, is to reduce the number of requests you make to your server. One way to do this with your Javascript is to include all of your js code on a single file (so only one HTTP request is necessary to load it), then cache the file so it doesn’t need to be downloaded again. In CSS, as a side note, a common technique is called Image Spriting, where all of the images referenced in your CSS are combined into one single, larger image file, so only one HTTP request is necessary to pull all those images from the server.

4. Inline your functions

A tedious, yet masterful habit to pick up is to have two versions of your scripts. One version is well commented, well designed and coded, and carefully structured, while the other version – the version you deploy, is highly optimized. This will be covered more in-depth in the next section, but in short, a main way to speed up your js is to avoid the overhead involved in calling functions. The easiest way to accomplish this is to inline each and every function call in your code. Javascript doesn’t have an “inline” function definition like C++, so the way you do this is to physically paste the entire function every time it is called. This will greatly speed up your code execution.

5. Compress your Code

Finally, after you optimize your code and inline your functions, the final thing to do to get the most out of your script, is to compress your code. Some people prefer to obfuscate their code to discourage people to straight copy their own code. Google offers a great tool known as the
Closure Compiler, which compiles your Javascript code into very compact, optimized code. This extra step definitely takes extra work, but is an absolute must have for anyone wanting to speed up their javascript libraries.

No comments:

Post a Comment