[Ext JS 4]性能优化

一般的优化技巧

1. 检查你定义的时间监听器

正确的设置事件监听器对性能会有很大的影响。举例来说，在定义一个store的时候，设置一个load 的事件去触发从后台读取数据，如果设置single 的值为true的话，则load的事情就只有在第一次取数据的时候会触发了。

listeners: {

    load: onFirstLoadData,

    single: true

}

给一个完整的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="extjs/ext-all.js"></script>

<link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />

<script>

var myStore;

Ext.onReady(function(){

	Ext.define('User', {

	    extend: 'Ext.data.Model',

	    fields: [

	        {name: 'firstName', type: 'string'},

	        {name: 'lastName',  type: 'string'}

	    ]

	});

	 myStore = Ext.create('Ext.data.Store', {

	     model: 'User',

	     proxy: {

	         type: 'ajax',

	         url: 'users.json',

	         reader: {

	             type: 'json',

	             root: 'users'

	         }

	     },

	     autoLoad: true,

	     listeners:{

	    	 single: true,

	    	 load: function(){alert("store load event");}

	     }

	 });	

	 Ext.create('Ext.grid.Panel', {

		    title: 'Sample',

		    store: myStore,

		    columns: [

		        { text: 'SurName',  dataIndex: 'lastName' },

		        { text: 'Name', dataIndex: 'firstName' }

		    ],

		    height: 200,

		    width: 400,

		    renderTo: Ext.getBody()

    });

});

function loadStore()

{

	myStore.load();

}

</script>

</head>

<body>

<input type=button value="load Store" onclick="loadStore()">

<div id="my-div"></div>

</body>

</html>

注意 ext 的 js 和 css 文件需要下载导入.

这里实现的效果就是点击 load Store 按钮，如果加了single: true，则load 这个事件就不会执行了。

另外一个需要注意的事件是 afterrender, 它在所有的DOM元素存在时触发。在渲染后修改元素会回流和降慢程序。相反的，可以使用beforerender在渲染之前调整类和设置样式。而一些必须在渲染后运行的代码，在 Ext JS 4.1 中有提供一个新的事件 -- boxready, 它运行在一个组件大小被确定之后。

2. 移除doLayout 和 doComponentLayout 呼叫

尽量移除高代价的呼叫。在Ext js 4之前的版本中，doLayout 是用来告知框架你已经完成了一个组件或容器，接下来去计算它的布局。在Ext JS 4.0 中这些呼叫也有时用来处理直接的DOM更新或是解决一些特定的缺陷。

在Ext JS 4.1中，布局的触发方式改变了，你的代码不需要呼叫 doLayout 或doComponentLayout。如果你还需要呼叫这个方法来处理缺陷，请提交缺陷报告给sencha吧。

3. 减少容器嵌套

每一个容器都是只需时间去初始化，渲染和布局。嵌套越少，程序的速度就会越快。举例来说：

{

    id: 'container1',

    items: [{

        id: 'container2',

        items: [{

            id: 'component3'

            }]

    }]

}

完全可以使用以下方式替换：

{

    id: 'container1',

    items: [{

        id: 'component3'

        }]

}

4. 使用 Containers ，而少使用Panels

Ext JS的Panels 比 Containers 功能更强大，当然代价也更高。显示指定 xtype:'container'，避免默认使用 'panel',类似

{

    xtype: 'container', // defaultType is 'panel'

    items: [ ... ]

}

5. 减少边界布局嵌套
在Ext JS 4.1 中，有很多方法来替代边界布局嵌套。移除这些嵌套可以减少初始化，渲染和布局组件的时间。在Ext JS的早期版本中，有些状况是必须使用嵌套，举例来说，在同一个区块有两个或更多的实例，如果在中心区域上需要两个北边的区域，就需要嵌套边界布局了。现在，可以直接指定两个北边区域作为一个边界布局的部分。

在Ext JS 4.1 中，区域可以动态的方式添加，而不需要一次把所有区块定义出来，不用的时候，又把他们隐藏起来。还可以使用weight 的属性设置区域的优先级--举例来说，

设置西边的优先级高于北边。

6. 减少DOM的读写

Ext JS 4.1 已经调整了布局和DOM的交互以尽可能的减少DOM的读写。客制的代码也应该尽量遵循这个规则，因为DOM的读写会降低程序的速度，高的开销和混写导致

回流。尽量使用beforerender 控制样式和类，避免使用 setStyle,addCls,removeCls或其他DOM元素修改的方式。

作为一般规则，操纵在DOM读写时分批次的操作会对性能有一定的提升。

使用Ext JS 4.1 提供的两个新的方法 Ext.suspendLayouts 和dExt.resumeLayouts来减少额外的布局。这两个方法有助于协调更新到多个组件和容器。

Ext JS 页面分析器

Ext JS 4.1 提供了一个新的工具用来分析应用程序的性能。使用它可以快速的测量系统系统并对相关的代码做更改。页面分析器有许多功能还是实验性的，但是布局标签优化是比较有用的性能优化的功能。

可以在开发工具包的以下路径找到这个工具

./examples/page-analyzer/page-analyzer.html

因为浏览器安全的原因，页面分析器只允许在同一台服务器上使用，所以使用时需要把整个 page-analyzer的文件夹复制到应用程序的相关目录下。

另外，要确保页面分析器的版本和你构建Ext JS版本要匹配，否则它是不能正常运行的。

接下来，看一下如何使用页面分析器：

1. 在浏览器中通过URL打开页面分析器

2. 输入需要分析的页面地址

3. 点击"load "，展现结果。

4. 点击 Layout 的标签，可以看到：

5. 但单个组件上有多个布局时，在代码中减少不必要的布局会提升系统的性能。

网格优化

使用Ext JS grid会遇到一个特别的性能问题，特别是在处理大型的数据集的时候。当处理小型的数据，速度不是问题。但当grid 处理"无限滚动"展现时，就会出现性能瓶颈了。因为无限滚动依赖于页面的缓存。

当使用者在滚动时，缓存数据变成可见的接着有消失在页面的顶部并且不再保存在DOM中了。调整这个的主要方法是尽可能的让DOM尽量小，在客户端缓存数据进而减少数据在服务端的往返。

滚动术语

当一个 data store 的buffered 配置成true的时候，一个PagingScroller 的对象会被建立出来用于监控视图的滚动（网格被配置成data views），同时用来为下一步提供快速的数据。

在下图中，用户滚动视图向下查看数据集，PagingScroller维护了滚动方向的一段前面区域的记录和一段后面区域的记录。

PagingScroller 要求data store保证trailingBufferZone和leadingBufferZone都已经在缓存中。

滚动的时候，如果数据已经在缓存中就直接显示，如果不再就要通过ajax 方式获取，这个时候页面会mask 住。如何设定缓存的大小，可以使用 Infinite Grid Tuner这个工具

使用例子像以下这样