One of the forms in our application is pretty complex and has around 600 canvas (according to iscShowConsole). It takes 6 seconds to render on a pretty recent (1 year old) dual core laptop (in IE 8)
We started digging, and we came up with a straightforward standalone sample, which is very simplistic test case. 600 input fields. Takes 6 seconds to render in IE8.
This rendering time seems to grow non-linearly with increasing the number of form fields (4x more fields take 16x more time to render).
We did some profiling with various tools (IE developer tools, dynatrace) and we think that bottleneck may be in the layout algorithm.
I cannot attach my html because it is larger than attachment size allowed.
Here's excerpt:
We started digging, and we came up with a straightforward standalone sample, which is very simplistic test case. 600 input fields. Takes 6 seconds to render in IE8.
This rendering time seems to grow non-linearly with increasing the number of form fields (4x more fields take 16x more time to render).
We did some profiling with various tools (IE developer tools, dynatrace) and we think that bottleneck may be in the layout algorithm.
I cannot attach my html because it is larger than attachment size allowed.
Here's excerpt:
Code:
<!--===========================================================================
SmartClient portal example -- portlet animation
creates interactive portlet list, and drag-and-drop portlet content area
===========================================================================-->
<!--===========================================================================
// INITIALIZATION
===========================================================================-->
<HTML><HEAD><TITLE>SmartClient portal animation example</TITLE>
<SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=isomorphic/skins/BlackOps/load_skin.js></SCRIPT>
</HEAD><BODY CLASS="pageBackground">
<SCRIPT>
isc.ValuesManager.create({
ID: "vm"
});
isc.VLayout.create({
width: 400,
height: 300,
membersMargin: 10,
members : [
isc.TabSet.create({
ID: "theTabs",
height: 250,
tabs: [
{title:"Item",
pane: isc.DynamicForm.create({
ID: "form0",
valuesManager:"vm",
fields: [
{name: "itemName", type:"text", title:"Item"},
{name: "description", type:"textArea", title:"Description"},
{name:"price", type:"float", title: "Price", defaultValue: "low"},
<!-- 598 lines more exactly as above line...>
{name:"price", type:"float", title: "Price", defaultValue: "low"}
]
})
},
{title:"Stock",
pane: isc.DynamicForm.create({
ID: "form1",
valuesManager:"vm",
fields: [
{name: "inStock", type:"checkbox", title:"In Stock"},
{name: "nextShipment", type:"date", title:"Next Shipment",
useTextField:"true", defaultValue:"256"
}
]
})
}
]
}),
isc.Button.create({
title:"Submit",
click : function () {
vm.validate();
if (form1.hasErrors()) theTabs.selectTab(1);
else theTabs.selectTab(0);
}
})
]
});
</SCRIPT></BODY></HTML>
Comment