Improving Ajax Performance

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.6.2.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 optimization technique for scripts is to minimize the number of script tags you send to a client. You have to balance the performance gains of minimizing script references versus caching individual scripts, but the tools we mentioned earlier, like YSlow, will help you make the right decisions. ASP.NET MVC 4 has the ability to bundle scripts, so you can combine multiple script files into a single download for the client. MVC 4 can also minify scripts on the fly to produce a smaller download.

Bundling and Minification

Bundling and minification features are provided by classes in the System.Web.Optimization namespace. As the namespace implies, these classes are designed to optimize the performance of a web page by minifying files (reducing their size) and bundling files (combining multiple files into a single download). The combination of bundling and minification generally decreases the amount of time needed to load a page into the browser.

When you create a new ASP.NET MVC 4 application, you'll find bundles are automatically configured for you during application startup. The configured bundles will live in a file named BundleConfig.cs in the App_Start folder of a new project. Inside you'll find code like the following to configure script bundles (JavaScript) and style bundles (CSS):

bundles.Add(new ScriptBundle("∼/bundles/jquery").Include(
            "∼/Scripts/jquery-1.*"));

bundles.Add(new StyleBundle("∼/Content/css").Include("∼/Content/site.css"));

bundles.Add(new ScriptBundle("∼/bundles/jqueryui").Include(
            "∼/Scripts/jquery-ui*"));

A script bundle is a combination of a virtual path (like ∼/bundles/jquery, which is the first parameter to the ScriptBundle constructor) and a list of files to include in the bundle. The virtual path is an identifier we'll use later when we output the bundle in a view. The list of files in a bundle can be specified using one or more calls to the Include method of a bundle, and in the call to include you can specify a specific file name or a file name with a wildcard to specify multiple files at once.

In the previous code, the file specifier ∼/Scripts/jquery-ui* tells the run time to include all the jQuery UI scripts in a bundle (even if there is only a single script file). The run time is smart enough to differentiate between minified and un-minified versions of a JavaScript library based on standard JavaScript naming conventions. The specifier will include jquery-ui-1.18.11.js in the bundle but not jquery-ui-1.18.11.min.js. You can create and modify your own bundles in BundleConfig.cs.

Once you have bundles configured, you can render the bundles with Scripts and Styles helper classes. The following code will output the jQuery bundle and the default application style sheet:

@Scripts.Render("∼/bundles/jquery")
@Styles.Render("∼/Content/css")

The parameter you pass to the Render methods is the virtual path used to create a bundle. When the application is running in debug mode (specifically, the debug flag is set to true in the compilation section of web.config), the script and style helpers will render a script tag for each individual file registered in the bundle. When the application is running in release mode, the helpers will combine all the files in a bundle into a single download and place a single link or script element in the output. In release mode, the helpers will also minify files by default to reduce the download size.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset