The new script loader object – part VI

As we’ve seen in previous posts, the new preview 6 introduced a new Sys.loader object. This is a fantastic object which I guess most of us will end up depending on for getting the necessary JavaScript files required by a page. Even though it’s great to let it download the files on demand, the truth is that there are some cases where you’re probably interested in combining all the files into one (yes, I did get some questions about this feature after publishing the previous posts on the script loader object). Combining resources is a known strategy for improving the performance of a web application.

The good news is that script combining is supported by the script loader object! Before we go on, it’s important to understand that the “physical” process of combining script files can only be done in the server side (you can build your combined script files by hand or you can rely in a handler for doing that for you). When I say that the script loader object supports combining scripts, what I’m trying to say is that it understands the concept of combining scripts and that you can give him that info when you define a script through the defineScript(s) method. For instance, take a look at the way MicrosoftAjax.js file is defined:

// Composite Scripts
{ name: "MicrosoftAjax",
   releaseUrl: "%/MicrosoftAjax.js",
   debugUrl: "%/MicrosoftAjax.debug.js",
   executionDependencies: null,
   contains: ["Core", "ComponentModel",
"History","Serialization", "Network",
"WebServices", "Globalization"] }

The contains property is used for specifying that the current script combines several scripts that have been previously registered. In this case, the MicrosoftAjax.js file contains many of the features supported by the library (as you can see by looking at the array that is passed into the contains property). Composite scripts are registered under the Sys.composites object. If you stop your code at a debugger, you’ll notice that it contains a reference to a script info object registered with the MicrosoftAjax name:

composites

By now, I guess that the question many of you are asking is: when will the script object download a composite script? It will only download it *automatically* if it sees that you’ve required all the features indicated in the contains property of a previously “registered” script. For instance, specifying something like this:

Sys.require([Sys.scripts.Core, Sys.scripts.ComponentModel,
            Sys.scripts.ApplicationServices,//not in microsoftajax
            Sys.scripts.Network, Sys.scripts.Serialization,
            Sys.scripts.History, Sys.scripts.Globalization,
            Sys.scripts.WebServices]);

means that the script loader will download the MicrosoftAjax.js file + the MicrosoftAjaxApplicationServices,js file (notice that the application services code – used in authentication, roles and profiles – isn’t defined within the MicrosoftAjax.js file!).

The second option you have is to force the download of a composite script file. This is easy because you can pass a reference to a composite when you call the Sys.require method:

Sys.require([Sys.composites.MicrosoftAjax]);

This will also end up downloading the MicrosoftAjax.js file. Before you go on combining all your script files, do remember that you should only do that after measuring and not because someone has said that script combining improves performance (it does, but as always, there’s a balance between combining and using the default files, especially when you’re using CDNs and rely on browser and proxy caching!). Btw, I expect that we’ll get some predefined combined scripts for the final version of the platform which match the most common scenarios.

And that’s it for now.Stay tuned for more on MS AJAX.

Advertisements

~ by Luis Abreu on October 19, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: