级别： 初级 Roland Barcia (barcia@us.ibm.com), 高级技术人员, IBM
2008 年 6 月 11 日 
加载 Ajax 应用程序之后，随后它将获取较小的数据和内容片段，以避免重新呈现整个页面的开销，从而提高性能。这样做的代价是，应用程序的初始下载时间通常会较长。本文将讨论如何减少 Dojo 应用程序的初始下载时间并同时获得很好的性能。
来自 IBM WebSphere Developer Technical Journal.
仅获取所需的数据
Asynchronous JavaScript and XML (Ajax) 应用程序能够提高某些 Web 应用程序的性能。加载应用程序之后，获取较小的数据和内容片段可以帮助避免重新呈现整个页面的开销。不过，这样做得的代价是，应用程序的初始下载时间通常会比较长。
我现在已有多年的 Dojo 应用程序使用经验。IBM® WebSphere® Application Server Feature Pack for Web 2.0 和 Project Zero 现在都包括 Dojo Toolkit 的 IBM 分发版本，提供了一些增值扩展。由于 Dojo Toolkit 的模块化特性，初始加载可能会花费相当长的时间，因为使用的每个模块可能都需要下载一些 JavaScript™、HTML 和 CSS 文件。这会在网络上带来大量额外的 IO 操作，远远超过每个模块本身的大小。
通常，这个模块化特征是程序员所必需的，因为通过其可以方便地进行调试和编码，但编写了应用程序之后，此模块化特征就不再重要了——或不再需要了。您可以通过多种方法减少 Dojo 应用程序的初始下载时间。
使用 Dojo 构建和打包系统
Dojo Toolkit 提供了打包和压缩技术，用于将在应用程序中使用的 Dojo 代码打包为单个文件，然后使用名为 Dojo ShrinkSafe 的压缩技术将其压缩到最小尺寸。大部分 Dojo 应用程序都应该将此技术作为其部署的一部分使用，因为此技术将极大地提高应用程序的性能（特别是初始下载时间）。您只需要为应用程序创建概要，并在其中指定要使用哪个 Dojo 组件。清单 1 显示了一个示例。
清单 1. 示例概要
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" ]
]
}; |
然后您将运行命令行构建工具，使用各种选项传入概要。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"
onclick="showItem('productList',
'product/product.html');">
Shopping
</div>
<div dojoType="dijit.form.Button"
id="orderListMenu" onclick="showItem('orderPage',
'cart/cart.html');">
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> |
通过清单 2 可以了解一些事项。我创建了一个简单的方法来将 HTML 片段加载到特定的内容中。我还使用 dojox.layout.ContentPane 替代了缺省 dijit。扩展的内容窗格允许在加载区域时执行 JavaScript。通过这样，不仅可以延迟加载 HTML 内容，还可以采用延迟加载方式加载关联的逻辑。清单 3 显示了我所编写的实用方法的实现。
清单 3. 延迟加载
var loaded = new dojox.collections.Dictionary();
function hideAll()
{
console.debug("Hiding other content");
var ids = loaded.getKeyList();
console.debug("Getting ID -> " + ids);
console.debug("List is Array");
for (var id in ids) {
console.debug("Getting section -> " + ids[id]);
var section = dijit.byId(ids[id]);
console.debug("Got Section -> " + section);
if (section) {
console.debug("setting DOM");
section.domNode.style.display = "none";
}
}
console.debug("Content is hid");
}
function showItem(key,template)
{
hideAll();
console.debug("Show Item -> " + key);
var item = dijit.byId(key);
console.debug(item);
if (item)
{
if(!loaded.contains(key))
{
item.setHref(template);
item.refresh();
loaded.add(key,template);
}
item.domNode.style.display ="block";
}
}
/**
* Load Default page
*/
dojo.addOnLoad(function loadDefault()
{
console.debug("Loading initial state");
showItem('productList','product/product.html');
}); |
在清单 3 中调用 showItem 时，我隐藏了在主体中可能可见的任何内容。我然后进行检查，确定是否加载了 HTML。如果未加载，将下载模板，然后将其缓存在 Dojo 词典中。下次请求此页面时，将会直接显示该区域。我还使用 dojo.addOnLoad 方法加载缺省页面。
在清单 3 中调用 showItem 时，我隐藏了在主体中可能可见的任何内容。我然后进行检查，确定是否加载了 HTML。如果未加载，将下载模板，然后将其缓存在 Dojo 词典中。下次请求此页面时，将会直接显示该区域。我还使用 dojo.addOnLoad 方法加载缺省页面。
不要全部使用 dijit
我们很可能喜欢为主要应用程序组件创建 dijit（Dojo 小部件）。例如，在清单 4 中，可以看到将应用程序处理为 Dojo dijit 的示例。
清单 4. 将应用程序处理为 dijit 可以减少下载时间
<div dojoAttachPoint = "registerId"
dojoType="registration:RegistrationWidget"
style="display:none"
>
</div>
<div dojoAttachPoint = "datacenterId"
dojoType="datacenters:DataCentersWidget"
inputTopic="no.show.datacenter"
style="display:none">
</div> |
在清单 4 中，我将每个应用程序组件都包装在 dijit 中。反过来，每个 dijit 都由子 dijit 组成。甚至可以将加载整个应用程序视为超 dijit：
<div id = "layout" dojoType="layout:EEFLayoutWidget" class="layoutDef"></div>
问题是，您忽略了延迟加载内容（或太过复杂而不能考虑这个选项），特别在构建中包括所有小部件的情况下。我发现，最好为 UI 组件（Data Grid、专用组合框、特殊文本区）创建 dijit，然后加载使用 dijit 的普通 HTML 模板。
通过遵循一些指导原则和实践，可以很容易地减少下载应用程序的时间，而且仍然能够获得 Dojo 具有的一些性能优势。
参考资料 学习
获得产品和技术
讨论
关于作者
对本文的评价
| 
