`
美丽心情19801230
  • 浏览: 5475 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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这两个类就可以了,提高了第一次进入模块时的性能。

分享到:
评论

相关推荐

    sencha touch动态加载组件

    Sencha Touch是一款强大的移动应用开发框架,主要用于构建高性能的触屏友好型Web应用程序。它提供了丰富的组件库,使得开发者能够创建复杂、互动性极强的移动应用。在处理大型或内容丰富的应用时,动态加载组件成为...

    sencha touch图片懒加载

    通过以上步骤,我们可以实现Sencha Touch中的图片懒加载功能,有效地提高页面加载速度,减少用户等待时间,同时节约了宝贵的网络资源。在实际项目中,应根据具体需求进行调整和优化,以达到最佳效果。

    sencha touch中文翻译文档

    8. **性能优化**:提供优化技巧,如延迟加载、内存管理,以及如何利用Sencha CMD工具进行构建和压缩,以提高应用性能。 9. **API参考**:包含Sencha Touch 2的核心类和方法的中文API文档,方便开发者查阅和查询。 ...

    一个完整的sencha touch 应用案例

    但在生产环境中,为了优化性能,我们会使用按需加载的精简版(如sencha-touch.js)。 3. **app.js**:这是应用程序的核心文件,定义了应用程序的架构,包括模型(Models)、视图(Views)、控制器(Controllers)和...

    Sencha 和 Sencha Touch 简介

    Sencha Touch 是第一个专门设计为移动设备开发 web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web ...

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于深入理解和使用Sencha Touch进行开发具有极大的帮助。 首先,让我们详细了解一下Sencha Touch 2.2.1的核心特性: 1. **...

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...

    sencha touch list demo

    在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的组件,用于展示数据集合。 1. **Sencha Touch 框架概述** Sencha Touch 是一个基于JavaScript的框架,...

    Sencha Touch in Action

    书中的标签"Sencha"指的是一种基于JavaScript的前端开发工具集,Sencha公司提供的主要产品包括Sencha Ext JS(针对PC端的JavaScript框架)、Sencha Touch(针对移动端的JavaScript框架)和Sencha Animator(一个...

    sencha touch应用程序

    标题中的“sencha touch应用程序”指的是使用Sencha Touch框架开发的一个移动应用项目。 在描述中提到,这个应用程序需要在Web服务器上运行才能查看其效果。这是因为Sencha Touch应用通常是基于HTML5、CSS3和...

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...

    sencha touch项目源码

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。这个项目源码是基于Sencha Touch开发的一个实例,通过研究这个项目,我们可以深入理解Sencha ...

    Sencha Touch MVC 模式

    在Sencha Touch中,MVC(Model-View-Controller)模式是其核心架构,帮助开发者组织和分离代码,提高代码的可维护性和可扩展性。本文将深入探讨Sencha Touch的MVC模式以及如何使用。 ### MVC模式简介 MVC模式是一...

    Sencha Touch 2入门教程之MVC例子程序源代码

    在Sencha Touch 2中,你可以定义一个模型类来描述数据对象,包括属性(fields)和验证规则。例如,对于登录界面,你可能有一个User模型,包含用户名(username)和密码(password)字段。模型还提供了与服务器进行...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    Sencha Touch2环境搭建

    Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...

    sencha touch grid

    Sencha Touch是一个流行的JavaScript库,用于构建高性能、跨平台的触摸友好型移动应用程序。Grid组件在移动应用中常用于展示和操作结构化数据,类似于桌面应用中的表格。 ### Sencha Touch Grid简介 Sencha Touch ...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的数据可视化工具,提供丰富的图表类型和交互效果。 在深入探讨这个实例之前,我们首先来了解这两个...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...

Global site tag (gtag.js) - Google Analytics