Free Writing

5月 27TH, 2010
By ISPERN

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

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

内容は･･･

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

という内容です。

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

サンプルソース

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

Ext.onReady(function() {
	Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';
	Ext.QuickTips.init();

	var start = new Date().getTime();

	var form = new Ext.Panel({
		renderTo: Ext.getBody(),
		title: 'FormPanel - Speed Test2 -',
		layout: 'form',
		width: 800,
		height: 600,
		padding: '20',
		autoScroll: true,
		items: [{
			xtype: 'fieldset',
			title: 'fieldset',
			items: [{
				layout: 'column',
				xtype: 'container',
				items: [{
					columnWidth: '.50',
					layout: 'form',
					xtype: 'container',
					items:[{
						xtype: 'textfield',
						fieldLabel: 'Sample1'
					},{
						xtype: 'textfield',
						fieldLabel: 'Sample2'
					}]
				},{
					columnWidth: '.50',
					layout: 'form',
					xtype: 'container',
					items:[{
						xtype: 'textfield',
						fieldLabel: 'Sample3'
					},{
						xtype: 'textfield',
						fieldLabel: 'Sample4'
					}]
				}]
			}]
		}

		・
		・
		・

	});

	var end = new Date().getTime();
	alert((end-start)/1000);
});

実行結果

containerを指定しない場合

containerを指定した場合

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

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

Social Bookmark Service