本文说的“缓慢”，是只运行时 的缓慢，而不是只加载资源的时间。

在过去的一年半以来，我一直与Robert Bosch在Bosch软件创新公司工作，在那里我们的前端技术堆栈非常依赖ExtJS。我有机会开发Visual Rules Web Modeler机器协助开发其它几个基于ExtJS的应用，因此，我积累了不少与ExtJS应用常见的性能问题有关的经验。

在这篇文章中，我将与你们分享导致ExtJS应用运行缓慢的瓶颈问题，并指出ExtJS开发者最容易犯的错误。

本文提及的ExtJS是指版本3.3.x及以下版本的ExtJS。

1、过度的Ext.Panel定义

在我看来，最常用的ExtJS组件是Ext.Panel。在ExtJS里定义一个面板太简单了，因而很多开发人员很容易就会过度的定义它。下面是一个典型的嵌套了子面板的面板定义：

?

var   panel   =   new   Ext . Panel ( {                   //   Level-1
          title :   ' Multi   Column ,   Nested   Layouts   and   Anchoring ' ,
          bodyStyle : ' padding : 5px   5px   0 ' ,
          width :   600 ,
          items :   [ {                                       //   Level-2
                layout : ' column ' ,
                items : [ {                                 //   Level-3
                              columnWidth : . 5 ,
                              layout :   ' vbox ' ,
                              items :   [ {                       //   Level-4
                                    html :   ' This   is   some   text '
                              } ,   {
                                    html :   ' This   is   another   text '
                              } ]
                } , {
                             columnWidth : . 5 ,
                             layout :   ' form ' ,
                              items :   [ {
                                            xtype : ' textfield ' ,
                                            fieldLabel :   ' Last   Name ' ,
                                            name :   ' last ' ,
                                            anchor : ' 95 % '
                              } , {
                                            xtype : ' textfield ' ,
                                           fieldLabel :   ' Email ' ,
                                            name :   ' email ' ,
                                            vtype : ' email ' ,
                                            anchor : ' 95 % '
                              } ]
              } ]
      } ]
} ) ;

?

●这是一个过渡定义的例子，它导致了多层深度的嵌套的HTMLElement创建，以致严重影响了初始化时间、渲染时间和组件的运行时间。

●我见过很多ExtJS开发人员习惯定义嵌套面板，因为它这样可以方便在面板里加入自定义的样式、文本和图片等等，或者有时仅仅是因为显示需要，在里面添加其它的面板，

●经验法则是：用尽可能少的面板和尽可能的减少面板（组件）的嵌套。

要做到这一点，在定义一个复杂的组件时，必须明智地使用Ext的布局及其样式，

2、尽可能延迟HTMLElement的创建

DOM操作（读/写）的开销一向是昂贵的，尤其在IE6，读取DOM总会引起回滚。

因此，经验法则是：尽可能延迟HTMLElement的创建 。以下是实现方式：

●组件Lazy初始化，这在xtype里可实现。

●尝试在渲染后（afterrender）后再执行昂贵的操作。

●避免在组件的构造函数或initComponent方法中对其它组件进行不必要的实例化或渲染。

例子1：1个简单的例子就是在按钮第一次渲染时，不创建Ext.Tooltio或在一个隐藏的DOM节点渲染它。tooltip通常会在用户第一次将鼠标移动到按钮上面时进行渲染。如果tooltip在按钮之后显示，用户就不必将鼠标移动到按钮上了。其实这是一种浪费，永远不要做这样的事，使用tooltip只会增加性能问题。

?

示例2：另一个例子是粗心的使用renderTo：

var   window   =   new   Ext . Window ( {
          renderTo :   document . body ,
          title :   ' The   Untitled '
} ) ;
 
window . show ( ) ;   //   窗口将会在这之前渲染

上述定义，窗口将会立即渲染和隐藏在body标记内。在大多数情况下，窗口根本不需要使用renderTo，因为它会在第一次显示时进行渲染：

var   window   =   new   Ext . Window ( {
	              title :   ' The   Untitled '
	} ) ;
	 
	window . show ( ) ;   //   窗口会在这时候进行渲染

3、尽可能使用委托模式

我不会在这里深入挖掘委托模式的细节，但会在ExtJS语法基础上重组它。

示例：一个委托模式的示例是工具条有10个按钮，而你希望在用户将鼠标移动到按钮上面时，为每个按钮委派一个Ext.Tooltip，而且每个Ext.Tooltip都显示不同的文本。

如果你创建10个Ext.Tooltip并委派给10个按钮，那么它不是一个优化的解决方案。你只需要创建一个Ext.Tooltip并委派给10个按钮的父元素，也就是工具条。

当用户将鼠标移动到工具条上方时，你可以显示相同的Ext.Tooltip，但其文本可根据目标元素（实际上就是按钮）而显示不同的文本（越多getTarget方法可了解如何获取目标元素）。

使用这个技术，只需要创建1个Ext.Tooltip，而且只需要在工具条绑定一个监听事件。

这可节省内存使用，而且在你的应用运行时实现了相同的效果。<