Ext JS 4.1 パフォーマンスチューニング

SenchaのブログでExt JS 4.1のパフォーマンスチューニングの記事が出てたので簡単に訳してみた (抄訳)。原文ではチューニングのためのTipsのほかに、Ext JS 4.1で新たに追加された性能測定ツールPage Analyzerの話もあるが、長くなるのでそっちは省略してTipsだけを要約して紹介する。

　原文：Optimizing Ext JS 4.1-based Applications
　Ext JS 4.1 beta 3のダウンロード：Download Ext JS 4

---

Ext JS 4.1でパフォーマンスが改善されたが、Ext JSベースのアプリケーションの性能を最大限に引き上げるには、アプリケーションの側でもExt JSの性能改善をうまく利用するようなコードを書く必要がある。以下、性能向上のためのTipsを紹介する。

1. イベントリスナーの使い方に注意する
   たとえばストアで初めてデータを取得した時のためにloadイベントを使うと、ストアがデータを取得するたびにloadイベントが発行されてしまう。リスナーにsingle:trueを設定してイベントが最初の1回だけ呼ばれるようにすれば、性能が大幅に向上する。
   
   
   listeners: {
   　　　load: onFirstLoadData,
   　　　single: true
   }
   
   
   afterrenderイベントも注意が必要だ。このイベントはDOM要素がすべて生成された後で呼ばれる。レンダリング後に要素を変更するとレンダリングのフローが再度実行されてしまうため、アプリケーション性能が低下する。beforerenderイベントを使ってレンダリング実行前にクラスとスタイルを調整し、1回で正しくレンダリングされるようにするとよい。
   
   レンダリング後に実行しなければならないコードがあるとすれば、要素のサイズを必要とする場合だろう。そのようなときは、Ext JS 4.1で新たに提供されたboxreadyイベントが使えるかどうか検討すべきだ。このイベントはコンポーネントのサイズが決定した後で実行される。
   
   
2. doLayoutとdoComponentLayoutの呼び出しは避けよ
   
   はっきり言って、この2つのメソッドは高価なのでできる限り呼び出さないほうがよい。4.0より前のバージョンのExt JSでは、doLayoutはコンポーネントとコンテナに対する処理が終わり、レイアウト計算に行く準備ができたことをフレームワークに通知するために使われていた。Ext JS 4.0でさえ、DOMを直接操作したり、ある種のバグを回避するのに、これらのメソッド呼び出す必要があった。
   
   Ext JS 4.1では、レイアウト計算の実行を開始する方法が変わり、これらのメソッド呼び出しが必要になるケースはほとんどなくなった。Ext JSのバグを回避するためにこれらのメソッド呼び出しが必要になる可能性はあるが、そのときはバグを修正するので報告してほしい。
   
   バグ以外でこの2つの呼び出しが必要になる唯一のケースは、アプリケーションコードでDOMを直接変更した場合である。フレームワークは変更を検知できないため、変更の影響が及ぶ部分のレイアウトを更新するためにこれらのメソッドの呼び出しが必要になる。
   
   
3. コンテナの階層数を減らす
   
   すべてのコンテナは初期化、レンダリング、レイアウトを実行する。このため不要なコンテナを外せば外すほどアプリケーションは高速化する。たとえばコンテナが子コンテナを1個だけ持ち、子コンテナの中に複数のコンポーネントがある場合、子コンテナはなくしてしまったほうがよい。
   
   
4. パネルの代わりにコンテナを使う
   
   パネル (Panel) は重いので、可能ならコンテナ (Container) を使ったほうが良い。
   
   
5. ボーダーレイアウトのネストは避ける
   
   以前のバージョンでは、同一のリージョンに2つ以上コンポーネントを配置したいときや、Centerリージョンの上に2つのNorthリージョンを置きたいときは、ボーダーレイアウトをネストしなければならなかったが、今ではボーダーレイアウトはNorthリージョンを2つ持つことができるようになっている。
   
   Ext JS 4.1では、リージョンは動的に追加できるようになった。これまでのように事前にリージョンをすべて追加しておき、不要なリージョンを非表示にするといった処理は不要になった。またリージョンの優先度を指定するためのweightプロパティも使えるようになった。
   
   
6. DOMのRead/Writeを減らす
   
   Ext JS 4.1では、レイアウトとDOMとの間のインタラクションをチューニングし、可能な限りDOMの読み書きを減らしている。アプリケーションコードを書くときも同じようにすべきである。もともとDOMの読み込みは遅いのだが、これに書き込みも混ざるとレイアウトの再計算が発生してしまい、オーバヘッドはさらに大きくなる。レンダリング後のコンポーネントの変更をさけるため、beforerenderイベントでスタイルとクラスを操作するようにすべきである。setStyle、addCls、removeClsなどのDOM要素を直接操作するようなメソッドは使用すべきでない。パフォーマンス向上のためには原則として、DOMの書き込み時に読み込みと書き込みを一括でおこなうようにすべきである。
   
   
7. Ext.suspendLayoutsメソッドとExt.resumeLayoutsメソッドを使って余計なレイアウト計算を抑止する
   
   Ext JS 4.1では、新たにExt.suspendLayoutsメソッドとExt.resumeLayoutsメソッドが追加された。2つのアイテムを2つのコンテナに追加するような場合、レイアウトとレンダリングが複数回実行されてしまうが、Ext.suspendLayoutメソッドを呼び出してからアイテムを追加すれば、個々のアイテム追加時にはレイアウトの再計算は実行されなくなる。追加が終わってExt.resumeLayoutsメソッドを呼び出したときに、フレームワークは初めてレイアウトとレンダリングを実行する。
   
   レイアウトの再計算処理が実行されるのはアイテムの追加時だけではない。コンポーネントとコンテナに対して何か操作したり変更したりすれば、レイアウト処理が実行される。パフォーマンスに問題があるアプリケーションはユースケースを精査して、余計なレイアウト計算が実行されないようにすべきである。