[Ext JS 4]性能优化

来源：互联网发布：adobe xd mac 下载编辑：程序博客网时间：2024/05/29 07:59

一般的优化技巧

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

Page Analyzer opening page

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

Page Analyzer layout runs

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

网格优化

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

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

滚动术语

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

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

PagingScroller with leading buffer zone of records ready to render

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

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

使用例子像以下这样

Infinite Grid Tuner. Experiment with parameters on the left to see what works best in the browser(s) your application targets