Performance Optimization

So you've built an application using Dojo and it "feels slow". Now what? Unfortunately, you can't send the latest Dual Core processors to your users But fortunately, experience has taught us that in JavaScript, smaller = faster, no matter what the client. So basically, you want to concentrate on the size of your pages. The smaller they are, the less time it takes to download, parse and execute them.

By default, all dojo.require() statements try to find the module in memory first. If it's not present, it will ask the server for a "full sized" version of the code in a synchronous manner , and incurring network I/O overhead. Synchronous network requests from a browser are necessary for loading external code because it's the only way to block execution of JavaScript while dependencies are satisfied. Once the code is fecthed it is then eval()'d and execution picks up after the dojo.require() statement.

Unfortunately synchronous IO requests also have the effect of "locking" the UI of the browser, preventing loading other resources affecting the layout of the page. Each request is serial. The package system doesn't know enough to try to request multiple files at once. To be fair, scripts included in a page via the <script> tag also suffer from the same serial behavior.

But there are still plenty of things you can do:

  • Use Dojo's custom build system. A custom build of Dojo will improve the download of the page by grouping related modules into one script, and optimizing it for fast parsing. See The Package System and Custom Builds for more information.

  • Configure the web server to cache JavaScript files aggressively and send status information quickly. Servers that don't send adequate cache information may find that UIs are very slow even when the script content isn't sent. Instead, browsers may be checking to see if the file has changed since it was last seen. This "has it changed?" check is synchronous and serial and so we want to eliminate it if possible.
  • Use data compression and application program structure as your server permits. See the article Improving performance of Dojo-based web applications which contains useful information on these topics.
  • If you find IE is repeatedly downloading the same image, read this article for advice. This also helps get rid of ugly image flickering in IE.
  • Reduce then number of tags on a page.

    It sounds obvious, but many web pages have a lot of unnecessary markup. For example, instead of /* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

    <table ...><BR></BR>  <tr>
    <td>Hello World</td>
    </tr>
    </table>
    just do: /* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}
    <div class="foo">Hello World</div>
    To achieve this, you definitely want to leverage CSS. The web standards movement has championed this approach, and Dijit uses it for reducing the widget download time.
  • Instead of downloading your whole page at once, defer portions until the user needs them. The judicious use of ContentPanes nested inside containers /* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}
    <div dojoType="TabContainer">
        <a dojoType="LinkPane" href="tab1.jsp">Tab #1</a>
        <a dojoType="LinkPane" href="tab2.jsp">Tab #2</a>
    </div>