Sencha Touch延迟加载模块中的小类提高程序进入每个模块时性能

阅读更多

　　上一篇文章我写了如何提高Sencha Touch在进入程序时的性能，但是后来发现，虽然进入程序时候性能提高了，但是初始化Controller的任务分摊到各个模块了，使得第一次进入模块的时候变得比原来慢了，那么问题来了，如何继续提高第一次进入模块时候的性能呢？Controller是必须要在进入模块时候初始化的，这是不能改变的事实，那能不能从其他方面入手呢？我查看每个模块的代码发现了一个共性的问题，就是我把模块中用到的所有类都提前声明了，代码如下：

Ext.define("mobile.blog.phone.BlogPhoneView", {
	extend : "Ext.Container",
	xtype : "blogPhoneView",
	config : {
		layout : "card",
		items : [		         
			{
	        	items:[
				    {
				    	xtype : 'blogSearchView'
					}, 
					{
						xtype : 'blogPhoneListView'
					}
				]
	        },
			{
				xtype : 'blogExtraURLView'
			},
			{
				xtype : "blogPhoneCommentListView",
			},
			{
				xtype : "blogPhoneTransferListView",
			},
			{
				xtype : "blogPhoneFormView"
			},
			{
				xtype : "blogPhoneHomeView"
			},
			{
				xtype : "blogPhoneMyInfoView"
			},
		]
	}
});

 　　这是我做的一个微博模块的主面板，其中包含了各种列表，各种表单，但是这些列表和表单很多都是在进入模块时候用不到的，所以能不能把这些用不到的也延迟加载呢？通过测试发现，layout为card的布局是可以动态加载类的，也就是开始不需要把类列举出来，等用到的时候再setActiveItem()进来，比如我把blogPhoneMyInfoView删除掉，等用的时候再通过blogPhoneView.setActiveItem(“blogPhoneMyInfoView”)加载进来，这样在blogPhoneView中只放进入模块时必要的类就可以了，修改后的代码如下：

Ext.define("mobile.blog.phone.BlogPhoneView", {
	extend : "Ext.Container",
	xtype : "blogPhoneView",
	config : {
		layout : "card",
		items : [		         
			{
	        	items:[
				    {
				    	xtype : 'blogSearchView'
					}, 
					{
						xtype : 'blogPhoneListView'
					}
				]
	        }
		]
	}
});

 　　这样在进入模块的时候只需要加载blogSearchView和blogPhoneListView这两个类就可以了，提高了第一次进入模块时的性能。