Welcome

首页 / 脚本样式 / Dojo Toolkit / 提高基于Dojo的Web 2.0应用程序的性能

提高基于Dojo的Web 2.0应用程序的性能2010-07-08施伟Web 2.0 应用程序最注重的一个方面就是用户体验,用户希望使用的是一个快速稳定的 Web 2.0 应用。而基于 Dojo 的 Web 2.0 应用经常需要下载大量 Dojo 代码到客户端执行,而且会不时的向后台发起 IO 请求,响应速度受到很大影响。本文通过演示一些实用的技巧来提高 Dojo 的性能,帮助开发人员找出 Web 2.0 应用程序的性能瓶颈。

Web 2.0 与 Dojo 介绍

Web 2.0 应用以其丰富的用户体验,快捷的响应速度越来越受到众多用户的欢迎。Google Map,Flickr,Yahoo Pipe 等经典的应用都利用了 Web 2.0 的特性。在一些大型的商业软件中,比如 IBM Portal 的新版本也加入了 Web 2.0 的新特性。

从实现的角度来说,一个 Web 2.0 应用最鲜明的特点就是利用了技术来进行异步的数据传输,动态更新当前页面中的某一个 DOM 节点,进行页面局部的刷新,避免了重新加载整个页面,从而使用户能更快的得到响应。

Dojo 作为目前使用最为广泛的一个 Ajax 实现框架,封装了简单易用的 XmlHttpRequest 来进行向后台发送请求,接受响应的操作。Dojo 最让程序员感到方便的就是它提供大量非常实用的 widget,基于 Dojo 提供的这些 widget,程序员可以制作出漂亮的页面,包括一些动画效果等等。

在使用 Dojo,享受它带来的便利的同时,它的性能问题就逐渐暴露出来。比如:当用户第一次加载页面时,会先下载大量的 Dojo 文件到浏览器端,然后再执行这些 Dojo 代码,生成相应的页面,如果您的应用中还使用了 Dojo widget,那还必须要下载这些 widget 对应的 HTML 模板文件和相关的其他资源,有没有什么办法能使下载 Dojo 文件的速度变快一些呢?当在一个页面上使用了大量的 Dojo widget 的时候,Dojo 的加载速度变得比较慢,如何才能让它变快一些呢?

解决 Dojo 性能问题的常见技巧

定制和压缩 Dojo

通常一个完整的 Dojo 库大约会有 2M 左右,其中包含了 Dojo 提供的各种 JS 工具方法,核心 IO 框架,Drag&Drop 支持,丰富的 widget 以及其对应的模版和 CSS 文件图片等等。在一个应用中,通常并不会使用到所有的 Dojo 库提供的功能,那么我们就可以通过运行一个 Dojo 发布包里面的命令来定制出一份个性化的 Dojo。

以 Dojo1.0.2 为例,从 Dojo 的官方网站下载一份完整版的 Dojo1.0.2,在 utiluildscripts、profiles 目录下,有很多 *.profile.js 文件,Dojo 默认情况下会采用 base.profile.js 作为 build 的参数,这个文件的内容如下:

清单 1. base.profile.js

dependencies = {
layers: [
{
name: "../dijit/dijit.js",
resourceName: "dijit.dijit",
dependencies: [
"dijit.dijit"
]
},
{
name: "../dijit/dijit-all.js",
resourceName: "dijit.dijit-all",
layerDependencies: [
"../dijit/dijit.js"
],
dependencies: [
"dijit.dijit-all"
]
},
{
name: "../dojox/off/offline.js",
resourceName: "dojox.off.offline",
layerDependencies: [
],
dependencies: [
"dojox.off.offline"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ]
]
}