ExtJS 4.1的优化技巧
日期：2013-12-23点击次数：8702
虽然Sencha在Ext JS 4.1提高了性能，但Ext JS的应用性能优化仍然是奋斗目标。要优化应用性能，通常需要根据Ext JS的增强优势对修改代码。这里总结了一些一般性的优化技巧。
一、检查事件监听
在应用程序中如何使用事件监听是一个提供性能的一个关键。例如，想在Store第一次加载数据时触发load事件，如果不注意，就会造成Store每次加载数据时都会触发load事件。这时候，在Store第一次加载数据触发load事件后关闭它，将会提升应用程序的整体性能。方法就是在监听中添加“single:true”：
listeners: {
load: onFirstLoadData,
single: true
}
另外一个经常忽略的是afterrender事件，它会在所有DOM元素都渲染后触发。渲染后修改元素会引起回流（reflows），从而降低应用性能。相反，使用beforerender事件，在渲染前调整元素的样式，可让元素在渲染时就是正确的样式。有时候，一些代码必须在渲染后，元素的大小被确定后才能运行。这时候，在Ext JS 4.1，可以考虑使用其提供的一个新事件——boxready，它会在组件大小确定后触发。
二、移除doLayout和doComponentLayout的调用
简而言之，就是尽量移除这些昂贵的调用。在旧版本Ext JS（4.0之前），doLayout会让框架在组件或容器继续前进时，重新计算其布局,即使在Ext JS 4.0，有时候，也需要在直接更新DOM后或解决某些缺陷时调用它,在Ext JS 4.1，布局的触发有点不同，因而，代码基本不需要调用doLayout或doComponentLayout。
三、减少容器嵌套
我们经常看到过多嵌套容器的应用，例如，一个容器内只有一个容器，而这个容器内有多个组件。这时候，可以取消外层容器，只使用一个容器完成同样的工作。很重要的一点，必须记住，每个容器的初始化、渲染和布局都需要花费时间，因而，必须排除这些不必要的嵌套容器，这样，应用将运行得更快。
四、使用容器替换面板
Ext JS面板比容器功能强大，但也是很昂贵的。因而，最好指定“xtype: 'container'”，以避免应用使用默认的面板。
五、减少边框布局嵌套
在Ext JS4.1，很多情况下，不再需要使用边框布局嵌套。移除嵌套可以减少初始化、渲染和布局组件的时间。在ExtJS之前的版本很多情况下都需要嵌套，例如，在同一区域内有两个或两个以上相同的区域。在Center区域上有2个North区域的时候，你必须嵌套边框布局。现在，使用一个边框布局就可以实现两个North区域。
在Ext JS4.1，区域可以根据需要动态添加，任何添加的区域可在前端显示并在不需要的时候隐藏它们。还可以通过weight属性定义区域的优先权，例如，可以定义West区域的优先权在North区域之前。这些变化意味着不再需要嵌套边框buutons，从而提高使用该布局的组件的渲染速度。
六、减少DOM的读取和写入
在Ext JS4.1，我们已经尽可能的减少了布局对DOM的读取和写入。同样，在你的代码也需要这样做。DOM在读取自身时会降低应用速度，尤其是在混合了DOM写入操作时的开销相当高，而且这样结合会引起回流。尝试使用beforerender来维护样式，这样可以在渲染时修改组件，而不是在渲染后。避免使用setStyle、addCls、removeCls以及其它直接修改DOM元素的语句，这些语句都会引起写入操作。作为一般规则，为了获得更好的性能，维护DOM时需要写入时，多尝试使用批量读取和写入。
七、用Ext.suspendLayouts和Ext.resumeLayouts消除额外的布局操作
Ext JS 4.1提供了Ext.suspendLayouts和Ext.resumeLayouts两个新方法来协调多个组件和容器的更新。例如，要迅速增加两个组件到两个连续容器，会导致多个布局和渲染操作被执行。如果在添加这些组件之前调用Ext.suspendLayouts方法，将不再单独执行个别组件的布局操作。添加完成后，调用Ext.resumeLayouts方法，框架将只执行一次渲染和布局操作。
软件部 汪震