milliseconds Add up in the Browser

dojo’s dynamic inclusion of the logic required to render pages is great. The line dojo.require("widget"), ensures that the code required to run “widget” will be ready to run.

There is a hidden cost to this - the underlying logic and requests to get the code from the server.

On a complex page that has a lot of widgets (more than 50% of the dijit widgets offered), it is worth considering the following tags:

Code

<script type="text/javascript" src="dojo/dijit/dijit.js"></script>
<script type="text/javascript" src="dojo/dijit/dijit-all.js"></script>

Although dijit-all is large, it is compressed, and it has all the widgets. A single request can replace 50 or more requests. Each request has an overhead of about 15ms, even if the javascript is cached in the browser. It is definitely worth running a test with Firebug to see if you can realize any performance gains with this strategy.

The ideal solution is a custom build, but you can’t always solve problems the “best” way. Sourcing dijit.js and dijit-all.js, using a loading .gif, and configuring caching carefully reduced page load time to 1/3 of the initial value, and provided a more graceful load process.