xtypeにcontainerを指定した場合の描画速度

先週、ExtJS勉強会 に行ってきました。
その中で小堤さんがパフォーマンス向上のテクニックについて
紹介されていたのでそれを試してみました。

内容は・・・

大枠のパネルの中にカラムレイアウトなどでテキストフィールドとか
フォームのアイテムのレイアウトを行う場合は、”container”を指定すると
パフォーマンスが向上する

という内容です。

詳しい内容については、小堤さんのブログで紹介されています。

サンプルソース

ソースではフォームレイアウトの中にfieldsetを設定し、さらにカラムレイアウトの中にテキストフィールドを4つ入れたセットを100個配置しているサンプルです。
それぞれカラムレイアウトとフォームレイアウトにcontainerを指定する場合と指定しない場合での描画時間をアラートで表示します。
時間測定ってこんなので良いのだろうか・・・。

実行結果

containerを指定しない場合

containerを指定した場合

※ブラウザが固まるので注意して下さい!!

Core2 2.0GHzのchromeで7秒くらい違いました。
フィールドを100個も配置する様な画面は無いと思いますが。。。
IE6とか遅い環境だともっと早くなるでしょうね。
それよりもなによりも、ボーダーとか背景とか無駄な描画がされないことが嬉しいです。フォームアイテムのレイアウトに限らず、Panelの中にPanelを入れたりする場合は多々あるので、その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。