When you start sending large amounts of script code to the client, you have to keep performance in mind. There are many tools you can use to optimize the client-side performance of your site, including YSlow for Firebug (see http://developer.yahoo.com/yslow/), and the developer tools for Internet Explorer (see http://msdn.microsoft.com/en-us/library/dd565629(VS.85).aspx). In this section we'll provide a few performance tips.
Using Content Delivery Networks
Although you can certainly work with jQuery by serving the jQuery scripts from your own server, you might instead consider sending a script tag to the client that references jQuery from a content delivery network (CDN). A CDN has edge-cached servers located around the world, so there is a good chance your client will experience a faster download. Because other sites will also reference jQuery from CDNs, the client might already have the file cached locally. Plus, it's always great when someone else will save you the bandwidth cost of downloading scripts.
Microsoft is one such CDN provider you can use. The Microsoft CDN hosts all the files used in this chapter. If you want to serve jQuery from the Microsoft CDN instead of your server, you can use the following script tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"
type="text/javascript"></script>
You can find the list of URLs for and see all the latest releases on Microsoft's CDN at http://www.asp.net/ajaxlibrary/CDN.ashx.
Script Optimizations
Many web developers do not use script tags inside the head element of a document. Instead, they place script tags as close as possible to the bottom of a page. The problem with placing script tags inside the <head> tag at the top of the page is that when the browser comes across a script tag, it blocks other downloads until after it retrieves the entire script. This blocking behavior can make a page load slowly. Moving all your script tags to the bottom of a page (just before the closing body tag) will yield a better experience for the user.
Another technique to decrease the load time of a page is to minify your own custom scripts. As mentioned in the section “Using jQuery” earlier in the chapter, minification can halve the download size of a file. Microsoft has a great JavaScript minifier available at http://ajaxmin.codeplex.com/.
Finally, another optimization technique for scripts is to minimize the number of script tags you send to a client. The ideal number of script tags a browser will see for any given page is one. To reach this ideal number you can use a script combiner to bundle multiple JavaScript files into a single resource. A variety of script combiners are available. Some of the script combiners work at build time and create new files in your project. Other script combiners perform their work at run time and dynamically combine scripts in response to an HTTP request. One such combiner is available at http://combres.codeplex.com/.