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