[Ext JS 4]性能优化| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4]性能优化

## [Ext JS 4]性能优化
### 一般的优化技巧
1. 检查你定义的时间监听器
正确的设置事件监听器对性能会有很大的影响。 举例来说， 在定义一个store的时候，设置一个load 的事件去触发从后台读取数据，如果设置single 的值为true的话，则load的事情就只有在第一次取数据的时候会触发了。
```html
listeners: {
load: onFirstLoadData,
single: true
}
```
给一个完整的例子：
```html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="extjs/ext-all.js">script>
<linkhref="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()
    });
});
functionloadStore()
{
	myStore.load();
}
script>
head>
<body>
<inputtype=buttonvalue="load Store"οnclick="loadStore()">
<divid="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. 减少容器嵌套
每一个容器都是只需时间去初始化，渲染和布局。嵌套越少，程序的速度就会越快。举例来说：
```html
{
id: 'container1',
items: [{
id: 'container2',
items: [{
id: 'component3'
            }]
    }]
}
```

完全可以使用以下方式替换：
{
id: 'container1',
items: [{
id: 'component3'
        }]
}

4. 使用 Containers ，而少使用Panels
Ext JS的Panels 比 Containers 功能更强大，当然代价也更高。显示指定 xtype:'container'，避免默认使用
panel',类似
```html
{
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这个工具
使用例子像以下这样

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4]性能优化

网站导航