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

加载 Ajax 应用程序之后，随后它将获取较小的数据和内容片段，以避免重新呈现整个页面的开销，从而提高性能。这样做的代价是，应用程序的初始下载时间通常会较长。本文将讨论如何减少 Dojo 应用程序的初始下载时间并同时获得很好的性能。

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. 示例概要

Js代码

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" ]
]
};

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. 布局

Js代码

<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>

<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. 延迟加载

Js代码

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');
});

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 方法加载缺省页面。

不要全部使用 dijit

我们很可能喜欢为主要应用程序组件创建 dijit（Dojo 小部件）。例如，在清单 4 中，可以看到将应用程序处理为 Dojo dijit 的示例。

清单 4. 将应用程序处理为 dijit 可以减少下载时间

Js代码

<div dojoAttachPoint = "registerId"
dojoType="registration:RegistrationWidget"
style="display:none"
>
</div>
<div dojoAttachPoint = "datacenterId"
dojoType="datacenters:DataCentersWidget"
inputTopic="no.show.datacenter"
style="display:none">
</div>

<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 具有的一些性能优势。

参考资料

学习

您可以参阅本文在 developerWorks 全球站点上的英文原文
The Book of Dojo: The Package System and Custom Builds
The Book of Dojo: DojoX Layout
Project Zero
IBM developerWorks Web development 专区
IBM developerWorks WebSphere Application Server 专区

获得产品和技术

讨论

Blog：Web 2.0 和中间件

posted on 2009-11-15 09:05 远-方阅读(308) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

远-方的博客

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

导航

公告