改善 Dojo 应用程序的初始下载时间

　2009-09-28 00:00:00　来源：WEB开发网　　　

核心提示： 然后您将运行命令行构建工具，使用各种选项传入概要，改善 Dojo 应用程序的初始下载时间(2)，Dojo 构建然后将应用程序所需的所有代码（包括 JavaScript、HTML 和 CSS）放入单个文件中，并对其进行压缩，您会希望加载包含初始菜单的布局，然后在加载之后获取主页内容，通过使用此方法

然后您将运行命令行构建工具，使用各种选项传入概要。Dojo 构建然后将应用程序所需的所有代码（包括 JavaScript、HTML 和 CSS）放入单个文件中，并对其进行压缩。通过使用此方法，我发现在应用程序初始下载中，IO 调用的数量可能从 200 个以上减少到 2 个或 3 个。我还发现总体大小减少了约 60%。将很快推出关于使用 Dojo 构建和打包系统的 developerWorks 教程，不过在 Dojo 网站上提供了关于打包系统和自定义构建的更多信息。

延迟加载和缓存 Dojo 内容

可以极大减少初始下载大小的另一个方法是，对页面的内容部分进行延迟加载，并在加载之后对其进行缓存。有时候，这样的做法会更好：不在首次访问应用程序时就加载所需的所有东西，而仅在这个时候加载应用程序的部分内容。用户完全可能会在访问站点时从来不会访问 Web 应用程序的某些特定部分，因此下载这些不会接触的部分所消耗的时间都浪费掉了。所以，您并不需要下载应用程序中可能不会使用的部分。而且，第一印象极为重要：如果不能快速显示初始主页，可能会让用户更快放弃使用您的程序。

通常，您会希望加载包含初始菜单的布局，然后在加载之后获取主页内容。常见 Dojo 应用程序通常由一些布局元素组成。请看清单 2：

清单 2. 布局

<body　class="tundra">　　<div　dojoType="dijit.layout.LayoutContainer"　　layoutChildPriority="top-bottom"　　id="main"　　class="layout"　>　　<div　dojoType="dijit.layout.ContentPane"　　　layoutAlign="top"　class="banner">　　　<h2>Electronic　and　Movie　Depot　!!</h2>　　</div>　　<div　dojoType="dijit.layout.ContentPane"　　　layoutAlign="top"　class="menu">　　　<div　dojoType="dijit.Toolbar"　id="mainMenuBar">　　　<div　dojoType="dijit.form.Button"　　　　id="productListMenu"　　　　>　　　　Shopping　　　</div>　　　<div　dojoType="dijit.form.Button"　　　　id="orderListMenu"　>　　　　Shopping　Cart　　　</div>　　　</div>　　</div>　　<div　dojoType="dijit.layout.ContentPane"　　　class="mainArea"　　　id="center"　layoutAlign="client">　　　<div　dojoType="dojox.layout.ContentPane"　　　executeScripts="true"　id="productList"　　　style="display:none">　　　</div>　　　<div　dojoType="dojox.layout.ContentPane"　　　executeScripts="true"　　　id="orderPage"　　　style="display:none">　　　</div>　　</div>　　</div>　 </body>