Optimize Dojo load time
August 20th, 2008 | by Ivan Kudryavtsev |One of our projects (it’s not in the portfolio yet, but will occur probably soon) involves extensive AJAX development to create interactive user interface. Our team decided to use Dojo framework to implement interactive interface features since this framework is proven to be very robust and currently included in many 3rd party products from software vendors like Zend, IBM, etc.
Dojo uses it’s own mechanism to load components from the server via special call dojo.require(…) which requests additional javascript files and loads additional components. This mechanism is very interesting and allows to avoid of loading a lot of scripts in the web pages and makes the code clean. From the other hand this mechanism causes very long load time of Dojo because after client requested certain component it should be loaded as separate javascript file from the server.
As a result Dojo loads very long time. For example, our administrative zone loads about 2 minutes using just next Dojo components:
("dijit.Dialog")
("dijit.Editor")
("dijit.form.Button")
("dijit.form.CheckBox")
("dijit.form.ComboBox")
("dijit.form.CurrencyTextBox")
("dijit.form.EmailTextBox")
("dijit.form.FilteringSelect")
("dijit.form.NumberSpinner")
("dijit.form.NumberTextBox")
("dijit.form.SimpleTextarea")
("dijit.form.Textarea")
("dijit.form.ValidationTextBox")
("dijit.layout.ContentPane")
("dijit.layout.LayoutContainer")
("dijit.layout.TabContainer")
("dijit.Tree")
("dojo.data.ItemFileReadStore")
("dojo.data.ItemFileWriteStore")
("dojo.io.iframe")
("dojo.parser")
("dojox.data.QueryReadStore")
("dojox.data.QueryWriteStore")
("dojox.grid._data.model")
("dojox.grid.Grid")
("dojox.layout.ContentPane")
("dojox.validate.regexp")
("dojox.widget.FileInput")
It’s easy to see that such a load time is awful for even very calm user and is inappropriate for web applications. How to optimize the load time for a web page which uses Dojo? There are 2 steps which should be used together:
- create Dojo custom build for your website;
- compress the traffic from your server using Gzip compression;
Next, I explain how to achieve these steps.
Step 1. Custom Dojo build
If you will be interested in decreasing Dojo load time you will probably find next article in the Dojo web site:
http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds
In short this article describes how to create custom build of Dojo framework suitable for your website. The important thing about it is that you need to determine all the components you are using in your application and create a custom Dojo build which includes only your components (this doesn’t mean that you will be unable to use another components, but the components you will place “as standard” will be loaded in one step with no additional scripts loading).
After building a custom dojo build you will get complete Dojo framework tree with additional files built to suite your requirements. Let’s first look on custom Dojo profile used by me:
dependencies ={
layers: [
{
name: "project_dojo.js",
dependencies: [
"dijit.Dialog",
"dijit.Editor",
...
"dojox.validate.regexp",
"dojox.widget.FileInput",
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "explosive", "../../explosive" ]
]
};
For me it’s project_dojo.js which is located at the same directory where dojo.js. Read more on custom build at the link above. Just to be finally complete I will give you my build command on MS Windows:
build.bat profile=project action=release localeList=en-us optimize=”shrinksafe,comments” layerOptimize=”shrinksafe,comments” copyTests=off
It creates custom build by profile “project.profile.js” with release configuration, includes only one locale “en-us” and optimized by removing all comments and with compression of javascript code using “ShrinkSafe” (see Dojo website).
Next step you need to reorganize your web pages to use custom built Dojo. How to implement this? Easy:
<script type="text/javascript" src="/scripts/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true, usePlainJson: true"></script> <!-- additional JS inclusion --> <script type="text/javascript" src="/scripts/dojo/project_dojo.js"></script>
After you will include this additional javascript inclusion (marked as bold) you will do all necessary. All dojo.require calls which involve components included in custom build will be used without calling of external javascript files from server because they are already included in project_dojo.js and can be used. This simple step significantly increases load time because all necessary components are in one file and loaded only one time. Ok, If you have missed to include certain component in the custom build then you still able to use it in usual way but it will be loaded in usual way and causes to slowdown.
Step 2. Traffic compression
Ok, let’s move to the second step of optimizing Dojo. Look at your project_dojo.js. Whoa! I’t half megabyte size, big indeed. Even at broadband channel user will be waiting for additional 1-5 seconds to load it first time. This is very big time for web applications. Understanding this we decided to compress the traffic to decrease the load time of project_dojo.js significantly. For us the values are decreased in 4+ times (500 KB before the compression and about 100KB after compression). It’s good enough because we can be sure that client currently is powerful enough to decompress it faster than we will transfer it without compression.
We have tuned our apache2 to compress the traffic but you can use another web server and should tune it in the recommended way. Below I will provide several command our system administrator used to tune apache2 to compress the traffic for the site:
AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz
#
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
DeflateCompressionLevel 9
</IfModule>
Resume
Ok, finally it’s possible to achive fast Dojo load and this makes it suitable for almost all web sites not only for web applications where user could wait for some time until the application will load. Dojo internal mechanisms make it possible load it with no tricks or hacks (like postloading, parallel loading and so on). You can just use <script src=”…”> to load your custom build of Dojo.
Standard mechanism of traffic compression allows to achieve fast Dojo loading by compression in 4+ times of custom build of Dojo.
We hope these facts and advice give you the way to create amazing web solutions using Dojo JS framework and they will work fast.
Thanks, Ivan A. Kudryavtsev, Bitworks, Ltd.
PS: You can request additional Dojo, Javascript and AJAX consultancy from our company. Just contact us using contact form.