5月 27TH, 2010
By ISPERN
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);
});
実行結果
※ブラウザが固まるので注意して下さい！！
Core2 2.0GHzのchromeで7秒くらい違いました。
フィールドを100個も配置する様な画面は無いと思いますが。。。
IE6とか遅い環境だともっと早くなるでしょうね。
それよりもなによりも、ボーダーとか背景とか無駄な描画がされないことが嬉しいです。
フォームアイテムのレイアウトに限らず、Panelの中にPanelを入れたりする場合は多々あるので、
その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。
Tags: Ext JS, JavaScript
