优化EXTJS的按模块下载JS的性能

企业开发 2018-05-13 18:49:15 阅读次数: 0

最近有不少用户跟我反馈，访问Joffice页面的某些功能，需要等几秒钟才能出来。鉴于这种情况，在此分析一下原因，同时也给出一些解决方案，可以帮助Joffice 1.2,Joffice 1.3的开发用户解决这种根本的问题，可以让这种按模块下载js速度提高7-8倍，特别是有一些模块需要加载很多js的时候，其下载速度还高更多。

joffice 1.3以前的版本，按模块下载的原理如下：

在此我们以流程管理模块为例：

在App.import.js中定义该模块所依赖的js，如下：

Java代码 复制代码  收藏代码
  1. FlowManagerView:[   
  2.             __ctxPath+'/js/flow/ProTypeForm.js',   
  3.             __ctxPath+'/js/flow/ProDefinitionForm.js',   
  4.             __ctxPath+'/js/flow/ProDefinitionView.js',   
  5.             __ctxPath+'/js/flow/FlowManagerView.js',   
  6.             __ctxPath+'/js/flow/ProDefinitionDetail.js',   
  7.             __ctxPath+'/js/flow/ProcessRunStart.js',   
  8.             __ctxPath+'/js/flow/ProDefinitionSetting.js',   
  9.             __ctxPath+'/js/flow/MyTaskView.js',   
  10.             __ctxPath+'/js/flow/ProcessNextForm.js',   
  11.             __ctxPath+'/js/flow/FormDesignWindow.js',   
  12.             __ctxPath+'/js/flow/FormEditorWindow.js',   
  13.             __ctxPath+'/js/flowDesign/FlowDesignerWindow.js'  
  14.     ]  
FlowManagerView:[
    		__ctxPath+'/js/flow/ProTypeForm.js',
    		__ctxPath+'/js/flow/ProDefinitionForm.js',
    		__ctxPath+'/js/flow/ProDefinitionView.js',
    		__ctxPath+'/js/flow/FlowManagerView.js',
    		__ctxPath+'/js/flow/ProDefinitionDetail.js',
			__ctxPath+'/js/flow/ProcessRunStart.js',
    		__ctxPath+'/js/flow/ProDefinitionSetting.js',
    		__ctxPath+'/js/flow/MyTaskView.js',
    		__ctxPath+'/js/flow/ProcessNextForm.js',
    		__ctxPath+'/js/flow/FormDesignWindow.js',
    		__ctxPath+'/js/flow/FormEditorWindow.js',
    		__ctxPath+'/js/flowDesign/FlowDesignerWindow.js'
    ]

 在此可以看出，该模块所依赖的js比较多，不过每个js都不大。

 当点击左菜单的“流程管理”时，其就通过ScriptMgr来下载其所依赖的js，全部下载完成后，才创建这个流程管理的Panel,并且加到TabCenterPanel中去。

我们的调用下载的js代码如下：

Java代码 复制代码  收藏代码
  1. function $ImportJs(viewName,callback,params) {   
  2.     var b = jsCache[viewName];   
  3.        
  4.     if (b != null) {   
  5.         var view =newView(viewName,params);   
  6.         callback.call(this, view);   
  7.     } else {   
  8.         var jsArr = eval('App.importJs.' + viewName);   
  9.         if(jsArr==undefined || jsArr.length==0){   
  10.             try{   
  11.                 var view = newView(viewName,params);   
  12.                 callback.call(this, view);   
  13.             }catch(e){   
  14.             }   
  15.             return ;   
  16.         }   
  17.         ScriptMgr.load({   
  18.                     scripts : jsArr,   
  19.                     callback : function() {   
  20.                         jsCache[viewName]=0;   
  21.                         var view = newView(viewName,params);   
  22.                         callback.call(this, view);   
  23.                     }   
  24.         });   
  25.     }   
  26. }  
function $ImportJs(viewName,callback,params) {
	var b = jsCache[viewName];
	
	if (b != null) {
		var view =newView(viewName,params);
		callback.call(this, view);
	} else {
		var jsArr = eval('App.importJs.' + viewName);
		if(jsArr==undefined || jsArr.length==0){
			try{
				var view = newView(viewName,params);
				callback.call(this, view);
			}catch(e){
			}
			return ;
		}
		ScriptMgr.load({
					scripts : jsArr,
					callback : function() {
						jsCache[viewName]=0;
						var view = newView(viewName,params);
						callback.call(this, view);
					}
		});
	}
}

即我们调用：

Java代码 复制代码  收藏代码
  1. $ImportJs('FlowManagerView',function(){   
  2.       return new FlowManagerView();   
  3. });  
$ImportJs('FlowManagerView',function(){
      return new FlowManagerView();
});

当传入FlowManagerView时，告诉我们就是需要在App.Import.js中取出该依赖的js数组，然后传给ScriptMgr的load中的scripts参数，告诉他们我们要完成这些js的加载，并且完成后，创建FlowManagerView对象。

现在我们来看一下ScriptMgr的Load方法：

Java代码 复制代码  收藏代码
  1. ScriptLoaderMgr = function() {   
  2.     this.loader = new ScriptLoader();   
  3.   
  4.     this.load = function(o) {   
  5.         if (!Ext.isArray(o.scripts)) {   
  6.             o.scripts = [o.scripts];   
  7.         }   
  8.   
  9.         o.url = o.scripts.shift();   
  10.   
  11.         if (o.scripts.length == 0) {   
  12.             this.loader.load(o);   
  13.         } else {   
  14.             o.scope = this;   
  15.             this.loader.load(o, function() {   
  16.                         this.load(o);   
  17.                     });   
  18.         }   
  19.     };   
  20. };  
ScriptLoaderMgr = function() {
	this.loader = new ScriptLoader();

	this.load = function(o) {
		if (!Ext.isArray(o.scripts)) {
			o.scripts = [o.scripts];
		}

		o.url = o.scripts.shift();

		if (o.scripts.length == 0) {
			this.loader.load(o);
		} else {
			o.scope = this;
			this.loader.load(o, function() {
						this.load(o);
					});
		}
	};
};

ScriptLoader的代码如下：

Java代码 复制代码  收藏代码
  1. /**  
  2.  * 用于动态加载js  
  3.   *  sample is here  
  4.   *   ScriptMgr.load({  
  5.   *   scripts: ['/js/other-prerequisite.js', '/js/other.js'],  
  6.   *   callback: function() {  
  7.   *     var other = new OtherObject();  
  8.   *     alert(other); //just loaded  
  9.   *   }  
  10.   * });   
  11.   */  
  12. ScriptLoader = function() {   
  13.     this.timeout = 10;   
  14.     this.scripts = [];   
  15.     this.disableCaching = true;//false   
  16.     this.loadMask = null;   
  17. };   
  18.   
  19. ScriptLoader.prototype = {   
  20.     showMask : function() {   
  21.         if (!this.loadMask) {   
  22.             this.loadMask = new Ext.LoadMask(Ext.getBody());   
  23.             this.loadMask.show();   
  24.         }   
  25.     },   
  26.   
  27.     hideMask : function() {   
  28.         if (this.loadMask) {   
  29.             this.loadMask.hide();   
  30.             this.loadMask = null;   
  31.         }   
  32.     },   
  33.   
  34.     processSuccess : function(response) {   
  35.         this.scripts[response.argument.url] = true;   
  36.         window.execScript ? window.execScript(response.responseText) : window   
  37.                 .eval(response.responseText);   
  38.         //if (response.argument.options.scripts.length == 0) {   
  39.             this.hideMask();   
  40.         //}   
  41.         if (typeof response.argument.callback == 'function') {   
  42.             response.argument.callback.call(response.argument.scope);   
  43.         }   
  44.     },   
  45.   
  46.     processFailure : function(response) {   
  47.         this.hideMask();   
  48.         Ext.MessageBox.show({   
  49.                     title : '应用程序出错',   
  50.                     msg : 'Js脚本库加载出错，服务器可能停止，请联系管理员。',   
  51.                     closable : false,   
  52.                     icon : Ext.MessageBox.ERROR,   
  53.                     minWidth : 200  
  54.                 });   
  55.         setTimeout(function() {Ext.MessageBox.hide();}, 3000);   
  56.     },   
  57.   
  58.     load : function(url, callback) {   
  59.         var cfg, callerScope;   
  60.         if (typeof url == 'object') { // must be config object   
  61.             cfg = url;   
  62.             url = cfg.url;   
  63.             callback = callback || cfg.callback;   
  64.             callerScope = cfg.scope;   
  65.             if (typeof cfg.timeout != 'undefined') {   
  66.                 this.timeout = cfg.timeout;   
  67.             }   
  68.             if (typeof cfg.disableCaching != 'undefined') {   
  69.                 this.disableCaching = cfg.disableCaching;   
  70.             }   
  71.         }   
  72.   
  73.         if (this.scripts[url]) {   
  74.             if (typeof callback == 'function') {   
  75.                 callback.call(callerScope || window);   
  76.             }   
  77.             return null;   
  78.         }   
  79.   
  80.         this.showMask();   
  81.         //alert('load now?');   
  82.         Ext.Ajax.request({   
  83.                     url : url,   
  84.                     success : this.processSuccess,   
  85.                     failure : this.processFailure,   
  86.                     scope : this,   
  87.                     timeout : (this.timeout * 1000),   
  88.                     disableCaching : this.disableCaching,   
  89.                     argument : {   
  90.                         'url' : url,   
  91.                         'scope' : callerScope || window,   
  92.                         'callback' : callback,   
  93.                         'options' : cfg   
  94.                     }   
  95.                 });   
  96.     }   
  97. };  
/**
 * 用于动态加载js
  *  sample is here
  *	  ScriptMgr.load({
  *	  scripts: ['/js/other-prerequisite.js', '/js/other.js'],
  *	  callback: function() {
  *	    var other = new OtherObject();
  *	    alert(other); //just loaded
  *	  }
  *	}); 
  */
ScriptLoader = function() {
	this.timeout = 10;
	this.scripts = [];
	this.disableCaching = true;//false
	this.loadMask = null;
};

ScriptLoader.prototype = {
	showMask : function() {
		if (!this.loadMask) {
			this.loadMask = new Ext.LoadMask(Ext.getBody());
			this.loadMask.show();
		}
	},

	hideMask : function() {
		if (this.loadMask) {
			this.loadMask.hide();
			this.loadMask = null;
		}
	},

	processSuccess : function(response) {
		this.scripts[response.argument.url] = true;
		window.execScript ? window.execScript(response.responseText) : window
				.eval(response.responseText);
		//if (response.argument.options.scripts.length == 0) {
			this.hideMask();
		//}
		if (typeof response.argument.callback == 'function') {
			response.argument.callback.call(response.argument.scope);
		}
	},

	processFailure : function(response) {
		this.hideMask();
		Ext.MessageBox.show({
					title : '应用程序出错',
					msg : 'Js脚本库加载出错，服务器可能停止，请联系管理员。',
					closable : false,
					icon : Ext.MessageBox.ERROR,
					minWidth : 200
				});
		setTimeout(function() {Ext.MessageBox.hide();}, 3000);
	},

	load : function(url, callback) {
		var cfg, callerScope;
		if (typeof url == 'object') { // must be config object
			cfg = url;
			url = cfg.url;
			callback = callback || cfg.callback;
			callerScope = cfg.scope;
			if (typeof cfg.timeout != 'undefined') {
				this.timeout = cfg.timeout;
			}
			if (typeof cfg.disableCaching != 'undefined') {
				this.disableCaching = cfg.disableCaching;
			}
		}

		if (this.scripts[url]) {
			if (typeof callback == 'function') {
				callback.call(callerScope || window);
			}
			return null;
		}

		this.showMask();
		//alert('load now?');
		Ext.Ajax.request({
					url : url,
					success : this.processSuccess,
					failure : this.processFailure,
					scope : this,
					timeout : (this.timeout * 1000),
					disableCaching : this.disableCaching,
					argument : {
						'url' : url,
						'scope' : callerScope || window,
						'callback' : callback,
						'options' : cfg
					}
				});
	}
};

从以上我们可以看出，其加载的js数组的时候，是加载完成一个js后，然后再加载另一个js，直到加载完成后才调用回调函数。若一个模块有20个js，每个js平均下载的时间需要0.5秒，即就需要10秒钟加载。当然我们可以把这些js合并至一个js，然后下载，这是理论上是可以的，不过不利于代码的划分。

我们知道浏览器是可以同时下载这些js的，只不过我们需要知道什么时候下载完成，下载完成后我们就可以调用回调函数。

鉴于此， 我们通过一个变量来记录其下载js，每完成下载一个就自动加1，若下载完成后，下载的数量就跟我们依赖的js的数量一样，就可以回调，这样我们有多少个js，就产生多少个下载器，每个下载器同时下载这些js，改进后的ScriptMgr的代码如下所示：

Java代码 复制代码  收藏代码
  1. ScriptLoaderMgr = function() {   
  2.     this.loader = new ScriptLoader();   
  3.     this.load = function(o) {   
  4.         if (!Ext.isArray(o.scripts)) {   
  5.             o.scripts = [o.scripts];   
  6.         }   
  7.         //记数器   
  8.         o.lfiles=0;   
  9.         for(var i=0;i<o.scripts.length;i++){   
  10.             o.url = o.scripts[i];   
  11.             o.scope = this;   
  12.             this.loader.load(o, function() {   
  13.                 o.lfiles++;   
  14.                 if(o.lfiles==o.scripts.length){   
  15.                     if(o.callback!=null){   
  16.                         this.loader.hideMask();   
  17.                         o.callback.call(this);   
  18.                     }   
  19.                 }   
  20.             });   
  21.         }   
  22.     };   
  23. };  
ScriptLoaderMgr = function() {
	this.loader = new ScriptLoader();
	this.load = function(o) {
		if (!Ext.isArray(o.scripts)) {
			o.scripts = [o.scripts];
		}
		//记数器
		o.lfiles=0;
		for(var i=0;i<o.scripts.length;i++){
			o.url = o.scripts[i];
			o.scope = this;
			this.loader.load(o, function() {
				o.lfiles++;
				if(o.lfiles==o.scripts.length){
					if(o.callback!=null){
						this.loader.hideMask();
						o.callback.call(this);
					}
				}
			});
		}
	};
};

大家可以在访问体验一下：

  http://oa.jee-soft.cn:8080/index.jsp

  http://office.jee-soft.cn:8080/index.jsp

  user:csx

  pwd 111

关于我

qq：1848175569

电话：13672461598

猜你喜欢

转载自nongyuxia.iteye.com/blog/1872501
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022