通過動態載入指令碼提高ExtJS應用效能

昨天同事把完成的乙個使用extframe框架的oa專案的源**發給我，跑起來後發現不出意料的，啟動時很慢，大約要等30-60秒的樣子

估摸著有這幾個原因：

1、啟動時需要載入的指令碼太多了

2、載入時就執行建立的物件太多了

3、ie效能不怎麼的，記憶體消耗的有點厲害

今天考慮做優化，首先取消執行時就建立的物件，於是把原來的showpanel方法改造一下：

function showpanel(panel) ;

原本導航**是這樣配置的：

<

node 
id="0501"
moniker
="opportunity"
label
="銷售機會管理"
iconcls
="icon-marketing"
handler
="loadpanel(opportunitypanel);"
/>

這樣寫，需要在建立首頁時就建立這個opportunitypanel，而且因為使用的card模式，需要建立時就執行建立這些物件的方法，這樣，所有物件都需要一開始就建立，效能比較低

於是改成把這些物件名先定義，然後把建立執行的**都放到乙個方法裡，再在第一次執行時執行這個方法後動態插入到card裡

成功後估摸著可以提高相當的效率，但是不知道指令碼載入和執行消耗的時間比例是多少，估計這樣做基本只能提高一倍的速度吧

想想如果能在需要時再載入指令碼，基本上啟動就不會再花時間了，所以就開始嘗試動態載入指令碼的寫法，試了很多寫法後，最後結果是這樣的：

配置改成：

<

node 
id="0501"
moniker
="opportunity"
label
="銷售機會管理"
iconcls
="icon-marketing"
handler
="loadpanel(opportunitypanel, '/scripts/marketing/opportunity/opportunity.js', 'loadopportunitypanel();');"
/>

loadpanel方法：判斷引數如果為空就載入指令碼，並在載入執行完後（建立了這個模組的物件）呼叫負責初入到card的**函式，否則顯示對應panel

function

loadpanel(panel, js, callback) 
};script.src =js;
}else
};

opportunity.js裡定義的**函式

function

loadopportunitypanel() ;

這樣做，在使用extjs做為框架的應用裡，就可以只在需要時才載入對應的業務邏輯指令碼檔案，既降低了啟動時間和消耗，又使沒使用到的模組不會被呼叫，大大降低了一開始建立全部物件帶來的系統消耗

ExtJs中動態載入機制研究

以service registry portlet為例 比如，在 liferay portlet.xml中定義了 然後在第5314行，就通過另外乙個方法getprefix 來根據controller的類名來獲取它的字首，並且這個字首會最終參與到運算。我們這裡省去這段邏輯，反正最終，這個 servic...

Extjs中通過Tree載入右側TabPanel

最近在做乙個物流管理的專案，公司必須要求用extjs4.1來做介面，因為以前一直也沒有接觸過所以開發的過程中遇到了很多的困難。同時extjs4.1的資料在網上也相對來說較少。好了，不說廢話上 1.左側的功能樹 1 ext.define am.view.systemtree 11 listeners ...

動態載入JS指令碼

要實現動態載入js指令碼有4種方法 1 直接document.write 2 動態改變已有script的src屬性 3 動態建立script元素 這三種方法都是非同步執行的，也就是說，在載入這些指令碼的同時，主頁面的指令碼繼續執行，如果用以上的方法，那下面的 將得不到預期的效果。要動態載入的js指令...