何があなたのExtJSアプリケーションをゆっくりと実行させますか?

本論文で述べた「ゆっくり」は、リソースのみをロードする時間ではなく、ゆっくりと実行することです.
一年半前から、私は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 ( {・// Level-102.title :' Multi Column , Nested Layouts and Anchoring ',03.bodyStyle :' padding : 5px 5px 0 ',04.width : 600 ,05.items : [ {// Level-206.layout :' column ',07.items : [ {// Level-308.columnWidth : . 5 ,09.layout :' vbox ',10.items : [ {// Level-411.html :' This is some text '12.} , {13.html :' This is another text '14.} ]15.} , {16.columnWidth : . 5 ,17.layout :' form ',18.items : [ {19.xtype :' textfield ',20.fieldLabel :' Last Name ',21.name :' last ',22.anchor :' 95 % '23.} , {24.xtype :' textfield ',25.fieldLabel :' Email ',26.name :' email ',27.vtype :' email ',28.anchor :' 95 % '29.} ]30.} ]31.} ]32.} ) ; 
この定義に問題がありますか?ありませんか?ここの主な問題は4層のパネルがはめ込まれていますが、実際には2層だけで作業ができます.
●これは、初期化時間、レンダリング時間、コンポーネントの動作時間に深刻な影響を与えるように、遷移定義の例である.
●多くのExtJS開発者がネストパネルを定義しているのを見たことがあります.このようにパネルにユーザー定義のスタイル、テキスト、写真などを入れるのが便利です.また、表示が必要なだけで、中に他のパネルを追加してもいいです.
●経験則としては、パネルの最小化とパネルの最小化を図るための入れ子があります.
このようにするには、複雑なコンポーネントを定義するには、Extのレイアウトとスタイルを賢明に使用しなければならない.
2、できる限りHTMLELE mentの作成を遅らせる
DOM動作(読み書き)のオーバーヘッドは、常に高価であり、特にIE 6においては、DOMの読み取りは、ロールバックを引き起こす.
そのため、経験の法則は、HTMLENEの作成をできるだけ遅らせることです.以下は実現方式です.
●コンポーネントLazy初期化は、xtypeで実現できます.
●描画後(afterrender)に高価な動作を実行してみます.
●コンポーネントのコンストラクターまたはinitComponent方法において他のコンポーネントの不必要な実装またはレンダリングを避ける.
例1:1の簡単な例は、ボタンの最初のレンダリング時に、Ext.Tooltioを作成しない、または隠しDOMノードでレンダリングします.tooltipは通常、ユーザが初めてボタンの上にマウスを移動した時にレンダリングする.tooltipがボタンの後に表示されると、ユーザーはボタンにマウスを移動しなくなります.実はこれは一種の浪費で、永遠にこのような事をしないでください、tooltipを使って性能の問題だけを増加することができます.
 
例2:もう一つの例は、うかつな使用render Toである.
view source
print
？1.varwindow =new・Ext . Window ( {2.renderTo : document . body ,3.title :' The Untitled '4.} ) ;5.6.window . show ( ) ;//  
上記の定義では、ウィンドウは直ちにbodyタグにレンダリングされ、隠します.ほとんどの場合、ウィンドウはレンダリングを使用する必要はありません.最初の表示時にレンダリングされます.
view source
print
？1.varwindow =new・Ext . Window ( {2.title :' The Untitled '3.} ) ;4.5.window . show ( ) ;//  
3、できるだけ依頼モードを使う
ここで依頼モードの詳細を掘り下げませんが、ExtJS文法に基づいて再編成します.
例:一つの依頼モードの例は、ツールバーには10のボタンがありますが、ユーザーがボタンの上にマウスを移動することを希望する場合、各ボタンのためにExt.Tooltipを作成し、また、Ext.Tooltipごとに異なるテキストを表示します.
10個のExt.Tooltipを作成し、10個のボタンを委任すると、最適なソリューションではありません.Ext.Tooltipを作成し、10ボタンの親要素、つまりツールバーに委任します.
ユーザーがマウスをツールバーの上に移動すると、同じExt.Tooltipを表示することができますが、テキストはターゲット要素(実際にはボタン)によって異なるテキストを表示することができます.
この技術を使うと、Ext.Tooltipを作成するだけでなく、ツールバーに監聴イベントをバインドする必要があります.
これはメモリを節約して使うことができます.あなたのアプリケーションが実行している間に同じ効果を実現しました.
ここでは例のExt.Tooltipのdelegate属性情報を見つけることができます.
4、部品の廃棄――どのように正しく廃棄するか
私が協力して性能を提供している間に、ExtJSの応用が遅いことを発見しました.一つの主要なボトルネックは部品の破壊です.ここで言っている部品の廃棄とは、もう使わない部品のことです.
●DOM中のHTMLELE ment.
●すべての待ち受けイベントを削除し、メモリの漏洩を避ける.
●すべてのサブコンポーネントを再帰的に廃棄する.
これらはコンポーネントのdestory方法によって処理できます.いくつかの場合、動作時には、destroyメソッドを使って使用していないコンポーネントを除去すると、深刻な性能低下を引き起こすことがあります.
例1:一つのパネルにポップアップメニューを作成したら、パネルのdestroyメソッドを書き換えて、ポップアップメニューを破壊するコードを追加してください.このように、パネルが破壊されるとポップアップメニューも廃棄されます.
view source
print
？01.Your . Component . Klass = Ext . extend ( Ext . Component , {02.initComponent :function( ) {03.// Initialize your custom stuff04.this. contextMenu =new・Ext . menu . Menu ( {05.renderTo : document . body06.// ..07.} ) ;08.} ,09.10.destroy :function( ) {11.// Destroy your custom stuff12.this. contextMenu . destroy ( ) ;13.this. contextMenu =null・;14.15.// Destroy the component16.Your . Component . Klass . superclass . destroy . call (this) ;17.}18.} ) ; 
例2:みんなが犯しているエラーは、エラー定義ウィンドウのcloseAction構成項目である.
close Actionがhideである場合、ユーザーが閉じるボタンをクリックしてウィンドウを閉じると、ウィンドウが見えなくなります.しかし、時には、ウィンドウは全稼働期間中に、二度と表示されないことがあります.したがって、ウィンドウを非表示または表示する必要があることを確認してください.そうでなければ、ウィンドウが閉じられている間にdestry方法を実行してウィンドウを破壊するように設定します.
view source
print
？1.varwindow =new・Ext . Window ( {2.closeAction :' hide ',3.title :' The Untitled '4.} ) ;5.6.window . show ( ) ;// render and display the window7.window . hide ( ) ;// the window is not destroyed but only hidden in the DOM. 
本論文では、ExtJSアプリケーションの性能を向上させるための手がかりを提供したいと思います.ExtJSの応用性能に関する他の問題と経験があれば、いつでもここで共有できます.大笑いする