昨天同事把完成的一个使用ExtFrame框架的OA项目的源代码发给我，跑起来后发现不出意料的，启动时很慢，大约要等30-60秒的样子
估摸着有这几个原因：
1、启动时需要加载的脚本太多了
2、加载时就运行创建的对象太多了
3、IE性能不怎么的，内存消耗的有点厉害
今天考虑做优化，首先取消运行时就创建的对象，于是把原来的showpanel方法改造一下：
function showPanel(panel) { Ext.getCmp('mainpanel').layout.setActiveItem(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) { if (panel == null) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { eval(callback); // Handle memory leak in IE script.onload = script.onreadystatechange = null; } }; script.src = js; head.appendChild(script); } else { Ext.getCmp('mainpanel').layout.setActiveItem(panel); Ext.getCmp('mainpanel').doLayout(); } };opportunity.js里定义的回调函数
function loadOpportunityPanel() { Ext.getCmp('mainpanel').add(opportunitypanel); Ext.getCmp('mainpanel').layout.setActiveItem(opportunitypanel); Ext.getCmp('mainpanel').doLayout(); };这样做，在使用ExtJS做为框架的应用里，就可以只在需要时才加载对应的业务逻辑脚本文件，既降低了启动时间和消耗，又使没使用到的模块不会被调用，大大降低了一开始创建全部对象带来的系统消耗
转载于:https://www.cnblogs.com/zuxOK/archive/2012/07/06/2579570.html
相关资源：数据结构—成绩单生成器