Sencha Touch推延加载模块中的小类提高程序进入每个模块时性能
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这两个类就可以了,提高了第一次进入模块时的性能。