对ExtJS4应用性能优化的几点建议

ExtJS由于UI设计过去强悍，导致性能问题一直被大家诟病，不过到ExtJS4.1之后，性能问题相比以前的版本已有所改善，下面是官方文档给出的优化建议，李坏在此做个小小的总结，仅供大家参考。

（1）合理设置监听事件

事件监听是我们在性能优化时需要非常注意的一个部分。比如：数据集store的load事件，正常情况下，我们只需要在第一次加载数据的时候发起请求、获取数据；但是，如果我们监听设置不合理，可能会导致，当我们每次查看该页面的时候，都会触发load事件，加载同样的数据，如果数据量特别大，无疑给我们的性能带来很大的影响。为了解决这个问题，我们可以为该监听事件添加single：true配置项，代码如下：

`1`	`listeners: {`

`2`	`load: onFirstLoadData,`

`3`	`single:` `true`

4 }

另一个需要我们注意的事件是afterrender，这个事件在所有的DOM节点加载完毕后被触发。每当我们对页面中的元素做任何修改，都会触发该事件、重新渲染页面，这样必然影响我们应用的加载速度。未解决这个问题我们可以用beforerender代替，在ExtJS4.1版本以后我们也可以使用boxready代替该事件，具体使用方法请参考官方文档。

（2）杜绝doLayout和doComponentLayout的调用

从字面即可看出，这两个方法都是对页面重新进行布局，对整个应用的页面重新计算布局，其付出的性能代价是非常昂贵的，好在ExtJS4.1开始，我们基本可以不再使用这两个方法，这里提出，只是给新手童鞋们一个提醒，李坏在此不再做详细阐述。

（3）减少容器嵌套

简而言之，能用一层嵌套实现的绝不用两层嵌套，能用两层嵌套实现的绝不用三层嵌套… …因为每一层容器的初始化、渲染和加载都是需要大量时间的，所有我们应该在保证功能完整的基础上尽可能减少容器嵌套。例如：

1 {

`2`	`id:` `'container1',`

`3`	`items: [{`

`4`	`id:` `'container2',`

`5`	`items: [{`

`6`	`id:` `'component3'`

7 }]

8 }]

我们完全可以用下面的布局替代：

1 {

`2`	`id:` `'container1',`

`3`	`items: [{`

`4`	`id:` `'component3'`

5 }]

6 }

(4)用container替代panel

当我们仅仅需要一个容器的时候，完全可以使用container替代panel（默认容器为panel），因为container是panel的基类，panel在功能上要比container强大的多，当然渲染一个panel消耗的性能也比container多很多，所以，如果可以，我们应该尽量使用container替代默认的panel。

1 {

`2`	`xtype:` `'container',` `// 默认容器类型 'panel'`

`3`	`items: [ ... ]`

4 }

（5）减少border布局嵌套

每添加一层border布局嵌套，就要增加一次布局初始化、渲染和加载的时间，在ExtJS4.1以前的版本，同一个页面的布局中如果需要两个North区域，需要嵌套两层border布局，在ExtJS4.1中，这种恶心的布局方式已经一去不复返了，不管想要实现什么样的布局结构，一个border布局已完全可以实现了。

（6）减少对DOM的读、写操作

ExtJS官方在开发4.1版本时，已经尽可能减少布局时对DOM节点的读写操作，因为对DOM节点的操作会降低应用的速度，尤其是写操作，对性能的开销还是相当大的，所以我们在开发应用时，也应该尽可能减少这样的操作。比如，对节点样式的修改我们尽可能使用beforrender事件，在页面渲染前实现，而不是渲染后。

以上是ExtJS官方文档给出的几条优化建议，李坏认为，这些注意事项应该是我们在开发过程中就应该注意的，而不是开发完成后重新做优化，否则，带来的工作量是相当巨大的，李坏曾在此付出过惨重代价，在此提醒大家，希望对各位有所帮助！