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,或者讓客戶進行機器的升級了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章