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

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

    博客分类:
  • EXT3
阅读更多

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

 

joffice 1.3以前的版本,按模块下载的原理如下:

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

 

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

 

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代码如下:

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);
					}
		});
	}
}
 

即我们调用:

 

 

$ImportJs('FlowManagerView',function(){
      return new FlowManagerView();
});

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

 

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

 

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的代码如下:

 

/**
 * 用于动态加载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的代码如下所示:

 

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

 

 

分享到:
评论
5 楼 man1900 2012-08-08  
ZQX123456 写道
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  
                    }  
                });
 
上面代码中为什么是argument、我看ext的api应是params、难道是版本问题?

argument是js函数本身的写法,用于传递参数
4 楼 ZQX123456 2012-08-07  
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  
                    }  
                });
 
上面代码中为什么是argument、我看ext的api应是params、难道是版本问题?
3 楼 ZQX123456 2012-08-07  
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  
                    }  
                });
 
上面代码中为什么是argument、我看ext的js应是params、难道是版本问题?
2 楼 man1900 2010-06-11  
要看你单位的带宽是否够大
1 楼 mygol 2010-06-10  
服务器放在局域网中 通过花生壳访问外网 不知道ext能否胜任

相关推荐

    EXTJS 3.03 zip下载

    10. **性能优化**:EXTJS 3.0.3对组件渲染和数据处理进行了优化,提升了整体性能,特别是在处理大数据量和复杂交互时。 在压缩包“ext-3.0.3”中,你会找到EXTJS 3.0.3的源代码、文档、示例以及可能的资源文件。...

    extjs-3.4.0下载

    此外,还有其他分模块的JavaScript文件,便于按需加载和优化页面性能。 2. **CSS样式表**:`resources/css`目录下有用于定义ExtJS组件外观的CSS文件,如`ext-all.css`,可以根据需求自定义主题。 3. **图像资源**...

    extjs3源文件下载

    通过下载和研究ExtJS 3的源文件,开发者不仅可以学习到JavaScript的高级用法,还能深入理解前端开发的最佳实践,以及如何构建可维护和高性能的Web应用。对于希望提升JavaScript技能或从事富客户端Web开发的人来说,...

    Extjs4 桌面效果优化

    通过对这些文件的研究和学习,开发者可以了解到如何根据自己的需求定制和优化ExtJS 4的桌面效果,从而提升Web应用的用户体验。同时,这样的实践也能帮助开发者深入理解ExtJS框架的内部工作原理和组件交互机制。

    extjs-4.1.1 源码下载、文档

    此外,下载的源码包通常还包括了必要的构建工具,如Sencha CMD,这是一款用于构建、压缩和优化EXTJS应用的命令行工具,可以方便地管理和打包项目。 总结起来,EXTJS 4.1.1提供了全面的源码、文档和实例,是开发者...

    ExtJS 2.3/3.0 定制你所需要的模块

    总的来说,这篇博客文章可能会提供关于如何在ExtJS 2.3/3.0中进行模块化开发和自定义组件的实用指南,同时也会涉及源码理解和性能优化,对于那些希望深入掌握ExtJS的开发者来说,是非常有价值的资源。

    ExtJs中引用的三个js

    6. **模块化与按需加载**:为了优化性能,ExtJS 4及以上版本引入了CMD(Command Line Compiler)和AMD(Asynchronous Module Definition)模块化加载机制。通过Sencha CMD工具,开发者可以将应用拆分为模块,并在...

    ExtJS 7.4 SDK trial

    SDK(Software Development Kit)是开发者用来创建、测试和优化ExtJS应用的工具集。在这个"ExtJS 7.4 SDK trial"中,我们得到了一个用于试验和学习的开发环境。 1. **ExtJS框架**: ExtJS 提供了一个完整的组件模型...

    ExtJs源码上传和下载

    1. **src** 目录:包含了ExtJs的核心源码,这些JavaScript文件按照模块化组织,比如组件(components)、数据(data)、事件(events)等。通过阅读源码,开发者可以了解其内部工作原理,定制自己的组件或扩展功能。...

    ExtJS 4.0 的改变

    ExtJS 4.0 是一个重要的更新,它引入了许多新特性,改进了框架的性能和可维护性。以下是其中的一些关键改变: 1. **兼容性**: - ExtJS 4.0 提供了一个向后兼容的解决方案,使得开发者能够更容易地将基于 ExtJS 3 ...

    extJS的相关学习资料

    此外,它可能还会涉及ExtJS的模块化开发、性能优化等方面,帮助你提高开发效率并提升应用质量。 学习ExtJS的过程中,理解组件模型、事件系统、MVC架构,以及如何有效地组织代码结构是非常重要的。同时,不断实践和...

    extjs4中文视频下载地址

    - **模块化架构**:ExtJS 4.0 引入了模块化架构,使得开发者可以按需加载特定的功能模块,提高了应用程序的性能。 - **主题引擎**:新增的主题引擎支持动态更换界面风格,使得应用的外观更加多样化。 - **增强的性能...

    Extjs3动态加载js源码

    动态加载JS(Dynamic JavaScript Loading)是现代Web开发中的一个重要技术,它可以提高页面的加载速度,减少初始加载的数据量,并在需要时按需加载资源,从而优化用户体验。 在ExtJS 3中,虽然没有像ExtJS 4那样...

    EXTJS4.0视频教程 30集 下载地址

    **3.4 性能优化** - **异步加载**:按需加载资源,减少初始加载时间。 - **缓存策略**:合理利用浏览器缓存,避免重复请求相同资源。 - **代码压缩**:使用工具压缩JavaScript和CSS文件,减小文件体积。 #### 四、...

    extjs 源码

    4. `js`: EXTJS的核心库,包括基础组件、布局、数据管理等模块的JavaScript文件。 5. `build`: 构建工具或编译后的文件,可能包括压缩和未压缩版本的库。 通过对EXTJS 3.0源码的学习,开发者不仅可以提升EXTJS的...

    ExtJS Web应用程序开发指南(第2版).pdf 高清下载

    尽管给定的部分内容主要涉及的是一个重复的链接到一个Java学习社区,并没有直接提供关于ExtJS的任何信息,但是基于标题“ExtJS Web应用程序开发指南(第2版).pdf高清下载”和描述,我们可以围绕ExtJS框架进行深入...

    ExtJs4.rar

    ExtJS是一个广泛应用于Web前端开发的JavaScript框架,其主要特点是提供了丰富的组件库和高度可定制的用户界面。在本文中,我们将深入探讨ExtJS4这一版本的重要特性、改进以及它如何扩展了先前版本的功能。 首先,...

    extjs-6.2.0-docs文档

    4. **性能优化**:EXTJS 6.2.0 在性能方面进行了优化,比如更快的渲染速度、更小的内存占用和更好的数据加载策略,这有助于提升用户在使用EXTJS 应用时的体验。 5. **API 更新**:EXTJS 的API 经常进行迭代,6.2.0 ...

    extjs2.2 框架下载

    10. **性能优化**:EXTJS 2.2对组件的渲染和数据加载进行了优化,通过延迟加载和分页等策略,减少了对服务器的压力,提升了应用的响应速度。 在EXTJS 2.2的压缩包文件"ext-2.2"中,通常会包含以下内容: - `js` ...

    Extjs版本CRM完整代码

    ExtJS是一种基于JavaScript的富客户端应用框架,由Sencha公司开发。它允许开发者构建功能丰富的、交互式的Web应用程序,无需后端服务器支持就能提供复杂的用户界面。本资源提供了ExtJS版本的客户关系管理(CRM)系统...

Global site tag (gtag.js) - Google Analytics