通过动态加载脚本提高ExtJS应用性能

昨天同事把完成的一个使用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做为框架的应用里，就可以只在需要时才加载对应的业务逻辑脚本文件，既降低了启动时间和消耗，又使没使用到的模块不会被调用，大大降低了一开始创建全部对象带来的系统消耗