`
fyjjack
  • 浏览: 33595 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

宏天J.Office 性能优化--EXTJS按模板下载js

    博客分类：
  • java
 
阅读更多

宏天对EXTJS的性能调整：

1.打开Tomcat或Appace的js、html,xml的gzip压缩功能
2.同时用yui工具压缩所有的开发的js,css
3.配置image,js,css的缓存功能
4.用gzip工具压缩超大的js

5、EXTJS按模板下载js

 

最近有不少用户跟我反馈，访问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);
					}
				}
			});
		}
	};
};

 

分享到：
| J.Office中的公文签名及签章
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    宏天影像采集系统演示 Ver3.16.123(2013-08)

    5、在控件中加载“采集测试文件”中的全部文件，或设置扫描仪后扫描，即可开始宏天影像采集前端的体验。 【有效期】 本次演示系统有效期到2013年9月29日，过期后将无法使用条码识别、影像编辑等部分功能，如需...

    宏天协同办公OA功能列表.pdf

    宏天J.Office协同办公系统V1.3是一款全面覆盖企业日常办公需求的软件，它包含了丰富的功能模块，旨在提升工作效率和团队协作能力。以下是对各主要功能的详细说明： 1. **我的桌面**：这是个人工作台，用户可以按照...

    宏天软件-开源BPM软件和服务提供商未来发展与规划 商业计划书.docx

    - 发布了Est-BPM v2.0、J-Office OA v2.0、J-Office ENT v1.3和CMS 1.0等多个版本的产品。 - 随后发布了BPMX 3，采用了Activiti开源流程引擎，支持BPMN2标准，可以独立或嵌入部署。 - 进一步推出了BPMX 5，对原有...

    宏天BPMX3.3业务流程管理平台操作手册

    - **Office相关配置**：印章管理、Office模板管理等。 - **代码生成器**：自动化生成代码模板，提高开发效率。 #### 四、总结 宏天BPMX3.3业务流程管理平台是一款强大的企业级解决方案，通过其丰富的功能模块和...

    宏天软件J2EE应用快速开发平台技术简介

    ### 宏天软件J2EE应用快速开发平台技术解析 #### EST-BPM平台：革新企业应用开发 **一、EST-BPM平台概述** 广州宏天软件有限公司，作为国内政府协同办公应用解决方案的领军者，专注于JBPM工作流引擎的开发与应用...

    宏天信业：2021年半年度报告.zip

    【标题】：“宏天信业：2021年半年度报告” 【描述】：这份压缩包文件包含的是宏天信业公司在2021年的半年度报告，它提供了该公司在2021年上半年的运营状况、财务表现、业务发展以及市场策略等关键信息。 【标签】...

    宏天信业：2021年半年度报告.PDF

    宏天信业：2021年半年度报告.PDF

    宏天信业：2019年半年度报告.PDF

    宏天信业：2019年半年度报告.PDF

    BPMX3技术架构介绍

    - **后续发展**：随着技术的不断进步，宏天还规划并开发了J.Office 3.0，并持续对BPMX3进行版本修正和升级，以适应更多应用场景的需求。 #### 三、宏天公司简介 宏天是一家国内领先的政府协同办公OA应用平台解决...

    基于jbpm与activiti的工作流平台技术架构介绍

    3. **基于模板代码生成**：支持基于模板的代码生成，提高了开发效率，减少了重复劳动。 4. **丰富的报表展示**：支持FineReport及Jasper Report两种报表引擎，满足多样化数据呈现需求。 5. **跨数据库的数据访问支持...

    工作流基础之JBPM

    4. **性能优化**：jBPM的高性能引擎可以处理大量并发的流程实例。 总结来说，jBPM是一个强大且灵活的工作流解决方案，尤其适合那些需要频繁调整业务流程的企业。通过学习和掌握jBPM，开发者能够更有效地构建和管理...

    基于JBPM工作流的CRM系统的设计与实现

    同时保证系统的稳定性，通过合理的架构设计和性能优化措施。 #### 五、实现细节 1. **工作流集成**：将JBPM工作流引擎集成到CRM系统中，实现业务流程的自动化执行。 2. **界面设计**：采用响应式设计原则，确保...

    技术师范学院毕业生个人简历.doc

    黎剑发在实习期间参与了多个项目，包括DSM南方电网自动计量系统、FOS松下财务优化系统、DRP东菱电器项目和威创工程服务平台二期，以及在宏天软件的广州东方信贸易有限公司企业综合管理系统。他在这些项目中担任了...

    网上商城项目-概要设计说明书.pdf

    网上商城项目通常指的是一个电子商务平台，允许用户浏览商品、添加商品到购物车、进行结算、支付以及跟踪订单。概要设计说明书是软件开发过程中的一个关键文档，它在项目的需求分析之后，详细设计之前编写，旨在概述...

    保险IT整体架构(XXXX版).pptx

    【保险IT整体架构概述】 保险行业的信息技术架构是支撑...宏天信业通过其丰富的产品线和服务，为保险行业提供了一个集成化、灵活且安全的IT架构，帮助保险公司适应不断变化的市场环境，优化业务流程，提升客户满意度。

    精品资料（2021-2022年收藏）某广电互动新系统建设项目系统方案建议书20110212.doc

    该文档由北京宏天德美数码科技有限公司编制，旨在满足苏州广电在新媒体时代对内容传输、用户交互以及业务管理的多元化需求。 1. **概述** 本项目旨在升级和优化苏州广电的现有系统，以支持互动电视、个性化服务和...

Magicbox
Global site tag (gtag.js) - Google Analytics