优化基于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”：

?

单击布局选项卡，将看到如下图所示的布局运行情况。
你可以在同一个组件中找到多个布局操作，然后查看你的代码，看看是否可以通过减少布局操作来提高性能。????? Grid优化

????? Ext JS Grid是造成Web应用性能问题的一个主要原因，尤其是在显示大量数据的时候。当Grid在渲染小量数据的时候，速度不是问题。然而，在显示大量数据的时候，如果不注意，虚拟的无限滚动就会成为性能瓶颈。无限滚动依赖于页面缓存分页，也就是在用户对Grid中进行滚动操作显示数据之前，需要在分页滚动对象内保存分页数据。

????? 当用户滚动时，缓存数据就变成可见的，而消失在页面顶部的则不再存放在DOM中。调整的主要途径是让让DOM的大小尽可能的小，并在客户端缓存数据从而减少与服务器的交互。

????? 滚动原理

???? 当Store的配置项buffered为true时，会实例化一个PagingScroller对象用于监控视图（Grid自带的数据视图）的滚动，同时要为视图即将进行的遍历操作提供实时数据而缓存分页数据。

????? 下图说明了用户滚动时视图获取数据的方式。PageingScroller会在往前方向维持一个前导缓冲地带，而在往后方向则维持一个小的后向缓存地带。

?

????? PagingScroller要求Store确保后向缓冲地带和前导缓冲地带都在缓冲中，这就需要计算那些页面是需要的，以确保它们被缓存，而Store只需要通过Ajax请求不在缓存中的页面。

????? 当视图往下滚动时，渲染表格的边界将会进入视图，当距离边距numFromEdge行的时候，Store就要加载继续往下的数据，同时保证垂直坐标同步以保证可视行在相同位置。当所需数据在页面缓存的时候，这个操作是在瞬间和无形中实现的。如果拖动滚动条超过了缓存页面，将会发送yieldAjax请求，并显示遮蔽直到数据返回。

????? 如果滚动增量在一个合理的速度范围内，请求区域的前导边界进入另一不在缓存的页面时，会调用Ajax请求该页。在大多数情况下，如果前导缓冲区域足够大，它会在在到达缓存行之前渲染表格。

????? 默认情况下，页面缓存只会缓存最近使用的5页，这个根据浏览情况进行添加，让更多的数据缓存在客户端，从而减少Ajax请求。Store的purgePageCount配置项可控制该行为。

????? 如果数据不是太多，例如50000行，那可以将它们整个缓存到客户端。设置Store的配置项purgePageCount为0，页面缓存后将不会被丢弃。

????? 如何设计大表取决于如何渲染和浏览速度。表越大，在视图到边界及从预取缓冲到更新数据之间的滚动范围就越多。然而，从预取缓冲中获取的数据越多，重新渲染的时间就越长。这需要在可视数据与重新渲染之间要保持一个平衡。如果应用的目标是快速浏览器，可以选择显示更多的行和数据。如果是较慢的浏览器，则可使用显示较小的行的较小的表，从而让其更快到达可视边界，适应经常的和更频繁的刷新。

????? 为了协助你调试Grid，Ext JS 4.1包内Examples目录下有一个名称为“Infinite Grid Tuner”的示例，它带有1个5万数据的数据集，可以让你设置不同的方式通过预处理缓冲为Store加载数据。例如，可以模拟Ajax的延时、修改预取数据的行数以及调整表的大小。你可以通过修改下图左侧上显示的不同的参数，研究一下怎样设置才能让你的应用在浏览器上表现得更好。

????? 通过Infinite Grid Tuner，你可以调整Store的purgePageCount设置。该设置会在渲染后从页缓存中删除大量数据。如果设置为0，它会在缓存中保存所有数据，这意味着，如果用户滚动Grid，将不需要从服务器中加载数据。

????? 使用Infinite Grid Tuner，要清楚两个概念：Grid内的可视数据可以被看作是一个滑动窗口。同样，页面缓存也可以被看作与Grid相关的滑动窗口的所有数据。你可以使用tuner改变两者的大小，还可以为它们分别补充规则，以确定从可视边界到从Grid可视部分和页面缓存获取数据之间，用户的滚动行数所在位置。