Dojo 客户端性能优化

Dojo 客户端调优的方式：

1. 编译合适的dojo文件。

dojo十分“巨大”， 而且有很多文件是最终用户不需要使用的。

默认情况下的dojo.js 比较大，有200多k，但是如果自定义进行编译之后可能只有10多k。

而且将常用的模块编译到dojo.js 也能提高效率。

dojo的加载顺序如下：

  1). 浏览器加载dojo.js

    dojo bootstrp code

    dojo loader

    (optionally) frequently used modules

 

  2). dojo.js 激活Dojo对象， 动态的载入其他的module，如果模块已经载入，那么将不会再一次重新载入。

 

dojo 提供了一系列典型的编译方案可以选择。

dojo 的编译可以减少文件的下载数目，可以使文件大小显著的减少。

 

2. 减少widget的使用。

  每加载一个dojo 的widget都需要额外的时间，所以当然使用越少dojo控件，速度就越快。

 

3. 使用新版本的dojo，建议1.0以上。

  新版本对性能进行了优化，减少了bug，所以尽量选用新的稳定版本。

 

4. 减少html tag，每增加一个tag，性能的负担就越重，比如

  使用<table><tr><td>xxxxxxx</td></tr></table>

就不如用<div>xxxxxxx</div>

 

5. 优化widget的加载 

 dojo在页面加载的时候将分析整个HTML文件，自动加载指定的内容为dojo控件。即使你没有定义任何dojo控件。所以优化widget的控件能够显著的提升一个页面加载的性能。

如果页面载入花费的时间比较多，你觉得不正常，可以用Firebug 看看是不是页面载入的时候花费很多时间在dj_load_init() 或者 modulesLoaded() 这些地方，这些都是明显的信号表明我们需要留意widget的加载问题。

 

dojo提供了多种方式来控制widget的加载。其中最重要的就是它提供了跳过所有widget 解析的方法，只需要加入下面的代码到dojo.js 引入之前：

 

<script> 
  djConfig = { parseWidgets: false, searchIds: [] }; 
</script>

 

那么如果需要解析一部分widget怎么办呢？ 下面的方法可以指定需要解析那些widget。只需要将需要解析的widget的id放到searchIds：

 

<script type="text/javascript"> 
  djConfig = { parseWidgets: false, searchIds: ["info", "confirmation"] }; 
</script> 
<script type="text/javascript" xsrc="dojo.js"></script> 
... 
<div dojoType="dialog" id="confirmation">...</div> 
... 
<div dojoType="dialog" id="info">...</div> 
... 
<input dojoType="dropdowndatepicker" value="2007-01-31" id="from_date"> 
<script>djConfig.searchIds.push("from_date");</script>  
 
...

 上面的代码一共解析了3个dojo widget，其中前两个直接放到searchIds ，而第三个则动态的加入到searchIds。

 

如果你不喜欢searchIds 的方式， 还有一种方式提供选择，给控件加上parseWidgets='false'属性：

 

<div parseWidgets="false"> 
   Dojo widget parser 将不会运行到这里，因为我们已经告诉他忽略这里。 
   ... 
</div> 

 

 

通过上面的方式，相信 你的dojo性能能够得到显著的提升，如果仍然达不到性能要求，那么可能你只能放弃dojo，或者让客户进行机器的升级了。

评论

2 楼 sos_2008 2009-01-14  

一楼说的对，searchids好象是1.0以前的版本才有的，我在1.0里试了很多次，都没有生效，如果楼主是在1.0里实验过的，请告知大家方法

1 楼 lengyun3566 2008-06-05  

dojo1.0 里没有下面的东西

djConfig = { parseWidgets: false, searchIds: ["info", "confirmation"] };