是什麼讓你的ExtJS應用程式執行緩慢?

2021-06-02 20:41:31 字數 3786 閱讀 6310

本文說的「緩慢」,是只執行時 的緩慢,而不是只載入資源的時間。

在過去的一年半以來,我一直與robert bosch在bosch軟體創新公司工作,在那裡我們的前端技術堆疊非常依賴extjs。我有機會開發visual rules web modeler機器協助開發其它幾個基於extjs的應用,因此,我積累了不少與extjs應用常見的效能問題有關的經驗。

在這篇文章中,我將與你們分享導致extjs應用執行緩慢的瓶頸問題,並指出extjs開發者最容易犯的錯誤。

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

1、過度的ext.panel定義

在我看來,最常用的extjs元件是ext.panel。在extjs裡定義乙個面板太簡單了,因而很多開發人員很容易就會過度的定義它。下面是乙個典型的巢狀了子面板的面板定義:

view source

print?

01.varpanel   =newext . panel ( ,   ]

15.} , , ]

30.} ]

31.} ]

32.} ) ;

這定義有問題嗎?沒有?這裡的主要問題是巢狀了4層面板,而實際上,只需要2層就可以工作了。

●這是乙個過渡定義的例子,它導致了多層深度的巢狀的htmlelement建立,以致嚴重影響了初始化時間、渲染時間和元件的執行時間。

●我見過很多extjs開發人員習慣定義巢狀面板,因為它這樣可以方便在面板裡加入自定義的樣式、文字和等等,或者有時僅僅是因為顯示需要,在裡面新增其它的面板,

●經驗法則是:用盡可能少的面板和盡可能的減少面板(元件)的巢狀。

要做到這一點,在定義乙個複雜的元件時,必須明智地使用ext的布局及其樣式,

2、盡可能延遲htmlelement的建立

dom操作(讀/寫)的開銷一向是昂貴的,尤其在ie6,讀取dom總會引起回滾。

因此,經驗法則是:盡可能延遲htmlelement的建立 。以下是實現方式:

●元件lazy初始化,這在xtype裡可實現。

●嘗試在渲染後(afterrender)後再執行昂貴的操作。

●避免在元件的建構函式或initcomponent方法中對其它元件進行不必要的例項化或渲染。

例子1:1個簡單的例子就是在按鈕第一次渲染時,不建立ext.tooltio或在乙個隱藏的dom節點渲染它。tooltip通常會在使用者第一次將滑鼠移動到按鈕上面時進行渲染。如果tooltip在按鈕之後顯示,使用者就不必將滑鼠移動到按鈕上了。其實這是一種浪費,永遠不要做這樣的事,使用tooltip只會增加效能問題。

示例2:另乙個例子是粗心的使用renderto:

view source

print?

1.varwindow   =newext . window ( ) ;

5.

6.window . show ( ) ;//   視窗將會在這之前渲染

上述定義,視窗將會立即渲染和隱藏在body標記內。在大多數情況下,視窗根本不需要使用renderto,因為它會在第一次顯示時進行渲染:

view source

print?

1.varwindow   =newext . window ( ) ;

4.

5.window . show ( ) ;//   視窗會在這時候進行渲染

3、盡可能使用委託模式

我不會在這裡深入挖掘委託模式的細節,但會在extjs語法基礎上重組它。

示例:乙個委託模式的示例是工具條有10個按鈕,而你希望在使用者將滑鼠移動到按鈕上面時,為每個按鈕委派乙個ext.tooltip,而且每個ext.tooltip都顯示不同的文字。

如果你建立10個ext.tooltip並委派給10個按鈕,那麼它不是乙個優化的解決方案。你只需要建立乙個ext.tooltip並委派給10個按鈕的父元素,也就是工具條。

當使用者將滑鼠移動到工具條上方時,你可以顯示相同的ext.tooltip,但其文字可根據目標元素(實際上就是按鈕)而顯示不同的文字(越多gettarget方法可了解如何獲取目標元素)。

使用這個技術,只需要建立1個ext.tooltip,而且只需要在工具條繫結乙個監聽事件。

這可節省記憶體使用,而且在你的應用執行時實現了相同的效果。

你可以在這裡 找到示例中ext.tooltip的delegate屬性資訊。

4、元件銷毀——如何正確銷毀

在我協助提供效能期間,我發現extjs應用緩慢的乙個主要瓶頸就是元件的銷毀。這裡所說的元件銷毀是指不再使用的元件,我們應該清理:

●dom中的htmlelement。

●移除所有監聽事件以避免記憶體洩漏。

●通過遞迴方式銷毀所有子元件。

以上這些可通過元件的destory方法來處理。有些時候,在執行時,使用destroy方法移除不使用的元件,會導致嚴重的效能下降。

示例1:如果你在乙個面板內建立了乙個彈出選單,記得重寫面板的destroy方法,在裡面新增銷毀彈出選單的**。這樣,當面板被銷毀時,彈出選單也會被銷毀。

view source

print?

01.your . component . klass   =   ext . extend ( ext . component ,   ) ;

08.} ,

09.

10.destroy :function( )

18.} ) ;

示例2:大家都會犯的錯誤就是錯誤定義視窗的closeaction配置項。

如果配置closeaction為hide,那麼當使用者單擊關閉按鈕關閉視窗時,視窗將變成不可見。然而,有時候,視窗在整個執行期間,都不會再顯示第二次。因而,你必須確保視窗是需要隱藏或顯示的,不然就配置closeaction為close,以便在視窗被關閉時執行destroy方法以銷毀視窗。

view source

print?

1.varwindow   =newext . window ( ) ;

5.

6.window . show ( ) ;//   render   and   display   the   window

7.window . hide ( ) ;//   the   window   is   not   destroyed   but   only   hidden   in   the   dom.

是什麼讓你的ExtJS應用程式執行緩慢?

本文說的 緩慢 是只執行時的緩慢,而不是只載入資源的時間。在過去的一年半以來,我一直與robert bosch在bosch軟體創新公司工作,在那裡我們的前端技術堆疊非常依賴extjs。我有機會開發visual rules web modeler機器協助開發其它幾個基於extjs的應用,因此,我積累了...

是什麼讓你的ExtJS應用程式執行緩慢?

本文說的 緩慢 是只執行時的緩慢,而不是只載入資源的時間。在過去的一年半以來,我一直與robert bosch在bosch軟體創新公司工作,在那裡我們的前端技術堆疊非常依賴extjs。我有機會開發visual rules web modeler機器協助開發其它幾個基於extjs的應用,因此,我積累了...

是什麼讓你的ExtJS應用程式執行緩慢?

本文說的 緩慢 是只執行時的緩慢,而不是只載入資源的時間。在過去的一年半以來,我一直與robert bosch在bosch軟體創新公司工作,在那裡我們的前端技術堆疊非常依賴extjs。我有機會開發visual rules web modeler機器協助開發其它幾個基於extjs的應用,因此,我積累了...