优化基于ExtJS4.docx

优化基于ExtJS4.1的应用.作者：wanghao8245 |?2012/5/14 21:03:34 | 阅读91次虽然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”：?[javascript]?view plaincopyprint?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属性在实际上很少见到，添加在这里是为了标记这里有两个容器）：?[javascript]?view plaincopyprint?{??????id:?container1,??????items:?[{??????????id:?container2,??????????items:?[{??????????????id:?component3??????????}]??????}]??}??如果可能，上面代码可减少为一个容器：[javascript]?view plaincopyprint?{??????id:?container1,??????items:?[{??????????id:?component3??????}]??}???????? 使用容器替换面板????? 请记住，Ext JS面板比容器功能强大，但也是很昂贵的。因而，最好指定“xtype: container”，以避免应用使用默认的面板，如下所示：（译者注：面板包含标题、工具栏等很多部件，因而其实例化时要创建很多部件的实例，并做很多布局运算，而容器就是一个简单的div，因而在非必要情况下使用容器，确实会大幅改善应用的性能，这个一定要切记）?[j