Improve the initial download time for dojo applications

Get only the data that you need

Asynchronous JavaScript and XML (AJAX) applications can improve the performance of some Web applications. After the application is loaded, getting smaller pieces of data and content can help avoid the overhead of rendering the entire page again. However, the cost of doing so is that the initial download time for the application is usually relatively long.

I now have years of experience using Dojo applications. Ibm®websphere®application Server Feature Pack for Web 2.0 and Project Zero now includes the IBM distribution version of Dojo Toolkit, providing some value-added extensions. Because of the modular nature of the Dojo Toolkit, initial loading can take a considerable amount of time because each module you use may need to download some JavaScript™, HTML, and CSS files. This brings a lot of extra IO operations over the network, much more than the size of each module itself.

Typically, this modular feature is necessary for programmers because it is easy to debug and encode, but after the application has been written, this modular feature is no longer important-or is no longer needed. There are several ways you can reduce the initial download time for a Dojo application.

Building and packaging systems using Dojo

The Dojo Toolkit provides packaging and compression technology for packaging Dojo code used in your application as a single file, and then compressing it to a minimum size using a compression technique called Dojo Shrinksafe. Most Dojo applications should use this technology as part of their deployment, because this technology will greatly improve the performance of the application (especially the initial download time). All you need to do is create a profile for your application and specify which Dojo component to use. Listing 1 shows an example.

Listing 1. Sample Overview

dependencies　={　

　　layers:　[
　　　　{　
　　　　name:　"example.js",
　　　　dependencies:　[

　　"dojo.*",
　　"dojo.parser",
　　"dijit.dijit",
　　"dijit.Declaration",
　　"dijit.layout.LayoutContainer",
　　"dojox.layout.ContentPane",
　　"dijit.Toolbar",
　　"dijit.layout.AccordionContainer",
　　"my.widget.Super"
　　　　]
　　　　}
　　],

　　prefixes:　[

　[　"dijit",　"../dijit"　],
　[　"my",　"/myWidgets"],
　[　"dojox",　"../dojox"　]
　　]

};

You will then run the command-line build tool and pass in the outline with various options. Dojo builds and then compresses all the code (including JavaScript, HTML, and CSS) that the application needs into a single file. By using this method, I found that the number of IO calls could be reduced from more than 200 to 2 or 3 in the initial download of the application. I also found that the overall size was reduced by about 60%. A developerWorks tutorial on using Dojo to build and package systems will soon be available, although more information on the packaging system and custom builds is available on the Dojo Web site.