优化基于ExtJS 4.1的应用

虽然Sencha在Ext JS 4.1提高了性能，但基于Ext JS的应用性能优化仍然是奋斗目标。要优化应用性能，通常需要根据Ext JS的增强优势对修改代码。

本文将介绍如何实现优化，还将介绍一个用于Ext JS 4.1的新的性能测量工具——页面分析器。其主要功能是改善应用的性能。通过它，就可以定出测量指标兵测量它，从而找出代码中的瓶颈，兵采取正确的步骤消除瓶颈。页面分析可以做到这一点。最后，还将介绍Grid的优化，并介绍另一个新的用于评估Grid性能的Ext JS工具——Infinite Grid Tuner。

正如我们为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。如果你的应用事实上需要这些调用来解决错误，那么请提交一个bug报告，一把我们能修复它。
唯一非错误时，需要调用doLayout或doComponentLayout，是在应用代码直接修改DOM的时候。原因是框架不知道这样的变化，因而需要调用它们更新受影响的布局。
减少容器嵌套 我们经常看到过多嵌套容器的应用，例如，一个容器内只有一个容器，而这个容器内有多个组件。这时候，可以取消外层容器，只使用一个容器完成同样的工作。很重要的一点，必须记住，每个容器的初始化、渲染和布局都需要花费时间，因而，必须排除这些不必要的嵌套容器，这样，应用将运行得更快。类似的代码如下（id属性在实际上很少见到，添加在这里是为了标记这里有两个容器）：

{
    id: 'container1',
    items: [{
        id: 'container2',
        items: [{
            id: 'component3'
        }]
    }]
}

如果可能，上面代码可减少为一个容器：

{
    id: 'container1',
    items: [{
        id: 'component3'
    }]
}

使用容器替换面板 请记住，Ext JS面板比容器功能强大，但也是很昂贵的。因而，最好指定“xtype: 'container'”，以避免应用使用默认的面板，如下所示：
（译者注：面板包含标题、工具栏等很多部件，因而其实例化时要创建很多部件的实例，并做很多布局运算，而容器就是一个简单的div，因而在非必要情况下使用容器，确实会大幅改善应用的性能，这个一定要切记）

{
    xtype: 'container', // defaultType is 'panel'
    items: [ ... ]
}

减少边框布局（borderLayout）嵌套 在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方法，框架将只执行一次渲染和布局操作。
谨记，不单添加组件会触发容器的布局操作，组件的其它操作或改变也会触发容器的布局操作。重要的是针对在应用中的性能问题进行具体情况具体分析，以确保没有多余的布局操作被执行。

{
    Ext.suspendLayouts();
    // batch of updates
    Ext.resumeLayouts(true);
}

Ext JS页面分析器介绍 Ext JS 4.1带有一个新工具，可用来查找和衡量应用程序的性能问题。通过它，可快速检测代码的修改对性能的影响。页面分析器会在加载Ext JS 4.1页面时与诊断工具挂钩。页面分析器包含了许多实验性功能，本文将介绍其最有用的，用于优化应用性能的布局选项卡。

你可以在Ext JS 4.1 SDK包的示例文件夹（Examples）下找到该工具：

./examples/page-analyzer/page-analyzer.html

复制整个“page-analyzer”文件夹到要分析的应用主机上，因为浏览器安全问题，页面分析器必须与分析页面在同一服务器上进行通讯，而且要确保页面分析器的版本与Ext JS的版本号匹配。如果使用不同的版本，它会罢工。
谨记，该工具是首次发布的工具，还处于发展中，因而，请通过Ext JS论坛将工具的使用情况反馈给我们。
以下是使用页面分析器的步骤：

1. 打开浏览器兵输入页面分析器的地址。
2. 打开后，在分析器中输入测试页面的地址。
3. 页面将在iframe中加载，这就是为什么分析器必须与应用在同一服务器的原因。打开页面后的分析器如下图所示：
4. 单击布局选项卡，将看到如下图所示的布局运行情况。