[Ext JS 4]性能优化

时间:2023-12-29 18:15:20

一般的优化技巧

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 ", 展现结果。

[Ext JS 4]性能优化

4. 点击 Layout 的标签,可以看到:

[Ext JS 4]性能优化

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

网格优化

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

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

滚动术语

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

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

[Ext JS 4]性能优化

PagingScroller 要求data store保证trailingBufferZoneleadingBufferZone都已经在缓存中。

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

使用例子像以下这样

[Ext JS 4]性能优化