對ExtJS4應用性能優化的幾點建議

ExtJS由於UI設計過去強悍，導致性能問題一直被大家詬病，不過到ExtJS4.1之后，性能問題相比以前的版本已有所改善，下面是官方文檔給出的優化建議，李壞在此做個小小的總結，僅供大家參考。

（1）合理設置監聽事件

事件監聽是我們在性能優化時需要非常注意的一個部分。比如：數據集store的load事件，正常情況下，我們只需要在第一次加載數據的時候發起請求、獲取數據；但是，如果我們監聽設置不合理，可能會導致，當我們每次查看該頁面的時候，都會觸發load事件，加載同樣的數據，如果數據量特別大，無疑給我們的性能帶來很大的影響。為了解決這個問題，我們可以為該監聽事件添加single：true配置項，代碼如下：

 
               1 
               listeners: { 
              
               2 
                   load: onFirstLoadData, 
              
               3 
                   single: true 
              
               4 
               }

另一個需要我們注意的事件是afterrender，這個事件在所有的DOM節點加載完畢后被觸發。每當我們對頁面中的元素做任何修改，都會觸發該事件、重新渲染頁面，這樣必然影響我們應用的加載速度。未解決這個問題我們可以用beforerender代替，在ExtJS4.1版本以后我們也可以使用boxready代替該事件，具體使用方法請參考官方文檔。

（2）杜絕doLayout和doComponentLayout的調用

從字面即可看出，這兩個方法都是對頁面重新進行布局，對整個應用的頁面重新計算布局，其付出的性能代價是非常昂貴的，好在ExtJS4.1開始，我們基本可以不再使用這兩個方法，這里提出，只是給新手童鞋們一個提醒，李壞在此不再做詳細闡述。

（3）減少容器嵌套

簡而言之，能用一層嵌套實現的絕不用兩層嵌套，能用兩層嵌套實現的絕不用三層嵌套… …因為每一層容器的初始化、渲染和加載都是需要大量時間的，所有我們應該在保證功能完整的基礎上盡可能減少容器嵌套。例如：

 
               1 
               { 
              
               2 
                   id: 'container1', 
              
               3 
                   items: [{ 
              
               4 
                       id: 'container2', 
              
               5 
                       items: [{ 
              
               6 
                           id: 'component3' 
              
               7 
                       }] 
              
               8 
                   }]

我們完全可以用下面的布局替代：

 
               1 
               { 
              
               2 
                   id: 'container1', 
              
               3 
                   items: [{ 
              
               4 
                       id: 'component3' 
              
               5 
                   }] 
              
               6 
               }

(4)用container替代panel

當我們僅僅需要一個容器的時候，完全可以使用container替代panel（默認容器為panel），因為container是panel的基類，panel在功能上要比container強大的多，當然渲染一個panel消耗的性能也比container多很多，所以，如果可以，我們應該盡量使用container替代默認的panel。

 
               1 
               { 
              
               2 
                   xtype: 'container', // 默認容器類型 'panel' 
              
               3 
                   items: [ ... ] 
              
               4 
               }

（5）減少border布局嵌套

每添加一層border布局嵌套，就要增加一次布局初始化、渲染和加載的時間，在ExtJS4.1以前的版本，同一個頁面的布局中如果需要兩個North區域，需要嵌套兩層border布局，在ExtJS4.1中，這種惡心的布局方式已經一去不復返了，不管想要實現什么樣的布局結構，一個border布局已完全可以實現了。

（6）減少對DOM的讀、寫操作

ExtJS官方在開發4.1版本時，已經盡可能減少布局時對DOM節點的讀寫操作，因為對DOM節點的操作會降低應用的速度，尤其是寫操作，對性能的開銷還是相當大的，所以我們在開發應用時，也應該盡可能減少這樣的操作。比如，對節點樣式的修改我們盡可能使用beforrender事件，在頁面渲染前實現，而不是渲染后。

以上是ExtJS官方文檔給出的幾條優化建議，李壞認為，這些注意事項應該是我們在開發過程中就應該注意的，而不是開發完成后重新做優化，否則，帶來的工作量是相當巨大的，李壞曾在此付出過慘重代價，在此提醒大家，希望對各位有所幫助！