加载 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. 布局
<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 具有的一些性能优势。
参考资料
学习
获得产品和技术
讨论
分享到:
- 2008-06-24 10:38
- 浏览 1503
- 评论(1)
- 论坛回复 / 浏览 (0 / 4544)
- 查看更多
相关推荐
我们并没有为我们的 Dojo 应用程序使用开箱即用的外观。因为我们需要的是一致的图形设计以符合我们产品线的品牌效应。因此,我们必须使用 Dojo 进行定制。定制是绝大多数开发人员耗费时间最多的一项工作,对于那些不...
Dojo构建Ajax应用程序源码,包括书中用到的dojo-release-1.1.2版本,现在都不太好找到下载源了
ATF开发 Dojo 应用,ATF开发 Dojo 应用
这是Hacker Dojo应用程序的共享模块和资源的集合。 它应该作为所有Dojo应用程序存储库的子模块包含在内。 包括在新的Dojo应用回购中 建议将公共规范高清共享存储库指向Dojo应用程序项目目录根目录中的“共享”目录。...
dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程
dojo与json应用说明
Dojo 1.4.0 beta2 下载,Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX
详细介绍了dwr及dojo框架的配置及具体应用,是一个很好的实例,可供学习
Dojo的目标是解决开发DHTML应用程序遇到的那些,长期存在 、历史问题。historical problems with DHTML 跨浏览器问题。 Dojo让你更容易 使web页面具有动态能力,或在任何稳健的支持javascript语言的环境中发挥作用。...
Dojo是使用TypeScript构建的现代Web应用程序的渐进框架。 请访问 ,有关文档,教程,食谱和其他材料的信息。 该存储库包含有关Dojo结构的详细信息,而dojo.io则专注于入门和学习Dojo。 @dojo/framework子包 有七...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
一、 Dojo学习笔记(1. 模块与包) 1 二、 Dojo学习笔记(2. djConfig解说) 4 三、 Dojo学习笔记(3. Dojo的基础对象和方法) 6 四、 Dojo学习笔记(4. dojo.string & dojo.lang) 9 五、 Dojo学习笔记(5. dojo.lang.array ...
超多的Dojo实例应用演示源码 超多的Dojo实例应用演示源码
dojo js dojo js dojo js dojo js dojo js dojo js dojo js
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱,它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说:“对于一个Web开发者而言,如果没有Dojo,他将是一个“残废”的...
dojo中文文档下载。dojo中文文档下载。
提高基于 Dojo 的 Web 2_0 应用程序的性能
Dojo开发包: 包含以下目录dijit dojo dojox util
而基于Dojo的Web2.0应用经常需要下载大量Dojo代码到客户端执行,而且会不时的向后台发起IO请求,响应速度受到很大影响。本文通过演示一些实用的技巧来提高Dojo的性能,帮助开发人员找出Web2.0应用程序的性能瓶颈。...
NULL 博文链接:https://hzbook.iteye.com/blog/390678