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

最新推荐文章于 2024-09-17 13:42:29 发布

cuanfangxiang3803

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量79

点赞数

文章标签： javascript ui ViewUI

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

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

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

不要全部使用 dijit

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

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

在清单 4 中，我将每个应用程序组件都包装在 dijit 中。反过来，每个 dijit 都由子 dijit 组成。甚至可以将加载整个应用程序视为超 dijit：

问题是，您忽略了延迟加载内容（或太过复杂而不能考虑这个选项），特别在构建中包括所有小部件的情况下。我发现，最好为 UI 组件（Data Grid、专用组合框、特殊文本区）创建 dijit，然后加载使用 dijit 的普通 HTML 模板。

通过遵循一些指导原则和实践，可以很容易地减少下载应用程序的时间，而且仍然能够获得 Dojo 具有的一些性能优势。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14789789/viewspace-410134/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14789789/viewspace-410134/

cuanfangxiang3803

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

Electronic and Movie Depot !!