ExtJS4.1でPage Analyzerを使いつつ、パフォーマンスチューニングをしたのでその時のメモです。
Page Analyzerは、ExtJSのSDKの、/examples/page-analyzer/page-analyzer.html をブラウザからアクセスすると使えます。上記ページでURLを指定すると、ページのiframeで実行し、分析結果を見ることができます。Layout, Components, Performanceの機能(タブ)があります。
例えば、Componentsは、以下のように画面中のComponentを確認することができます。
上部バーに書き込んだURLにアクセスし、Componentの場合は「Generate Component Tree」ボタンを押すと上記のような画面になります。
私が今回一番使ったのは、Layoutです。ExtJSでは、ページを生成する際に、一定の条件でComponentをLayout化する(この意味を正確に理解していませんが、componentを中間オブジェクトからdomツリー上、及びExtのページ全体の管理オブジェクトに組み込むような処理と理解しています)ようです。
その処理が実行されただけ、Runフォルダが表示されます。1ページ内でも何度も実行されるようです。
私は以下の方針でチューニングを進めました。
1)Panel-itemsの階層を減らす
レイアウトを調整したり、スクロールバーを出すためなど、安易に階層を多くしていた箇所を極力スリムにしました。
2)処理の重さは、Panel>Container>Component
xtypeを指定しないと、デフォルトはPanelになってしまいます。今回、Page Analyzerで一番はっきりと改善効果を計測できたのがこの部分でした。Runフォルダを展開していくと、下図のようにComponentごとの処理時間が表示されます。
PanelだったオブジェクトをComponentにするとはっきりと数字に影響します。Componentで済みそうな箇所を探して、数字が減っていく様子を見るのは楽しかったです。
3)まとめてLayout化する
LayoutのRunフォルダの対象オブジェクトを見ると、同じオブジェクトに対して何度もLayout化していることがあります。これらを可能な限りまとめると、全体の不可を小さくできます。
具体的には、
Ext.suspendLayouts();
を実行すると、次に
Ext.resumeLayouts(true);
するまでレイアウト化が実行されなくなります。
これも2度実行されていたRunフォルダが1つになることを確認できます。ただし、Page AnalyzerのTimeをみると、2回になったから2分の1、というわけではなく、足した数から一定割合が減少した、という改善です。
suspendLayouts関数を複数組み込んだとき、suspendLayoutsとresumeLayoutsの間が長くcallback関数などが絡むなど、layoutが正しく実行されなくなることがあります。
また、極端な話、全体を囲ってしまえば一回で済むわけですが、それでは一度の負担が大きくなるような気もします。このあたりはよくわかりません。
まとめ)
改善すべき個所がはっきりと数字として表示されることで目標が明確になり、改善結果も見えるのでPage Analyzerはかなりありがたいツールです。
ただ、今回活用できたのはごく一部です。
LayoutのRunフォルダ以下で、処理時間の内訳が表示されます。緑色のComponent内の最適化についてはわかるのですが、数字が大きい、FlushやInvalidateをどう理解すればよいかわかりませんでした。
Invalidateは文字通り解釈すれば、間違った記述がある、ということと思われますが、Component内のモジュールの部分部分をコメントアウト→実行→Invalidateの数字を確認、というアプローチではInvalidateの数字は変わらず、うまくいきませんでした。
また、Performanceタブは内容を理解できず、解説記事も見つけられませんでした。
参考)
http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications
パフォーマンスチューニングに関するSenchaのブログ。2013/03/30現在、Page Analyzerを検索して得られる情報はこのサイト以上のものを見つけられませんでした。
http://www.sencha.com/forum/showthread.php?153565
上記ブログで紹介されている、チューニングに関するSenchaのForumでのスレッド。
http://neverep.blogspot.jp/2012/03/ext-js-41.html
上記記事の日本語での紹介記事。