Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    ListGrid Performance issues

    I have written a new module that contains two list grids stacked on top of each other, both with variable numbers of columns (per client or user basis). I'm seeing at least 4 seconds of browser lag time to render the SmartClient widgets using initial data. In some cases our server time is over 1 second, so plus network latency we are seeing over 6 seconds to load a page, most of which is spent spinning in the browser.

    Here's a test case I wrote to show the issue. Our prod code has a little bit more cell formatting code, but the times are within 1s of what we're seeing in prod. I used 1920x1080 resolution on Chrome Version 39.0.2171.95 developer tools to profile the time scales; however, the lag is consistent across all major browsers as well.

    Is there anything I can do to make list grids with initial data load faster? Thank you.

    Code:
    <!doctype html>
<html>
<head>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_History.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Calendar.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_RichTextEditor.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_PluginBridges.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Drawing.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/system/modules/ISC_Charts.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js?isc_version=v9.1p_2014-06-26.js></SCRIPT>

<body>
	<script>
		isc.DataSource.create({

	ID:"supplyItem",
	titleField:"itemName",

	fields: [
		{name:"itemID",      type:"sequence", hidden:"true",       primaryKey:"true"},
		{ name:"itemName",    type:"text",     title:"Item",        length:"128",       required:"true"},
		{ name:"SKU",         type:"text",     title:"SKU",         length:"10",        required:"true"},
		{ name:"description", type:"text",     title:"Description", length:"2000"},
		{ name:"category",    type:"text",     title:"Category",    length:"128",       required:"true"},
		{ name:"units",       type:"text",     title:"Units",       length:"5"},
		{ name:"unitCost",    type:"float",    title:"Unit Cost",   required:"true"},
		{ name:"inStock",   type:"boolean",  title:"In Stock"},
	{name:"itemID1",      type:"sequence", hidden:"true"},
		{ name:"itemName1",    type:"text",     title:"Item",        length:"128",},
		{ name:"SKU1",         type:"text",     title:"SKU",         length:"10"},
		{ name:"description1", type:"text",     title:"Description", length:"2000"},
		{ name:"category1",    type:"text",     title:"Category",    length:"128"},
		{ name:"units1",       type:"text",     title:"Units",       length:"5"},
		{ name:"unitCost1",    type:"float",    title:"Unit Cost",   required:"true"},
		{ name:"inStock1",   type:"boolean",  title:"In Stock"},
	{name:"itemID2",      type:"sequence", hidden:"true"},
		{ name:"itemName2",    type:"text",     title:"Item",        length:"128",},
		{ name:"SKU2",         type:"text",     title:"SKU",         length:"10"},
		{ name:"description2", type:"text",     title:"Description", length:"2000"},
		{ name:"category2",    type:"text",     title:"Category",    length:"128"},
		{ name:"units2",       type:"text",     title:"Units",       length:"5"},
		{ name:"unitCost2",    type:"float",    title:"Unit Cost",   required:"true"},
		{ name:"inStock2",   type:"boolean",  title:"In Stock"},
	{name:"itemID3",      type:"sequence", hidden:"true"},
		{ name:"itemName3",    type:"text",     title:"Item",        length:"328",},
		{ name:"SKU3",         type:"text",     title:"SKU",         length:"30"},
		{ name:"description3", type:"text",     title:"Description", length:"2000"},
		{ name:"category3",    type:"text",     title:"Category",    length:"328"},
		{ name:"units3",       type:"text",     title:"Units",       length:"5"},
		{ name:"unitCost3",    type:"float",    title:"Unit Cost",   required:"true"},
		{ name:"inStock3",   type:"boolean",  title:"In Stock"},
	{name:"itemID4",      type:"sequence", hidden:"true"},
		{ name:"itemName4",    type:"text",     title:"Item",        length:"428",},
		{ name:"SKU4",         type:"text",     title:"SKU",         length:"40"},
		{ name:"description4", type:"text",     title:"Description", length:"2000"},
		{ name:"category4",    type:"text",     title:"Category",    length:"428"},
		{ name:"units4",       type:"text",     title:"Units",       length:"5"},
		{ name:"unitCost4",    type:"float",    title:"Unit Cost",   required:"true"},
		{ name:"inStock4",   type:"boolean",  title:"In Stock"}
			]
		});

	isc.defineClass("TestDataGrid", "ListGrid").addProperties({

    dataSource: "supplyItem",
    //canFreezeFields:true,
    //autoFetchData: true,
	autoDraw: true,
	formatCellValue: function(value, supplyItem, rowNum, colNum) {
		var fieldName = this.getFieldName(colNum).toLowerCase();
		if (fieldName.indexOf("description") > -1) {
			return value.substring(0,20) + " ...CONTINUED";
		} else {
			return value;
		}
	},
	fields:[
		{name:"itemName", width:75},
		{name:"category", width:75},
		{name:"SKU", width:75},
		{name:"units", width:40},
		{name:"unitCost", width:40},
		{name:"inStock", width:50},
		{name:"description", width:200},
		{name:"itemName1", width:75},
		{name:"category1", width:75},
		{name:"SKU1", width:75},
		{name:"units1", width:40},
		{name:"inStock1", width:50},
		{name:"description1", width:200},
		{name:"itemName2", width:75},
		{name:"category2", width:75},
		{name:"SKU2", width:75},
		{name:"units2", width:40},
		{name:"inStock2", width:50},
		{name:"description2", width:200},
		{name:"itemName3", width:45},
		{name:"category3", width:75},
		{name:"SKU3", width:75},
		{name:"units3", width:40},
		{name:"inStock3", width:50},
		{name:"description3", width:200},
		{name:"itemName4", width:45},
		{name:"category4", width:75},
		{name:"SKU4", width:75},
		{name:"units4", width:40},
		{name:"inStock4", width:50},
		{name:"description4", width:200}
	],

	data: createDemoData(75)
		
	
});
function createDemoData(size) {
	var data = [];
	var seedDemo = function(i) {
	var rawData = {
	itemID: i,
	itemName:"item "+i,
	category:"cat1",
	SKU: "12345",
	units: "ea",
	unitCost: 15,
	inStock: true,
	description: "Bacon ipsum dolor amet flank alcatra tenderloin beef doner. Bresaola capicola landjaeger pancetta. Ball tip drumstick beef ribs short loin swine filet mignon prosciutto short ribs ham hock venison biltong corned beef. Chuck bresaola beef ribs filet mignon. Flank corned beef biltong pork chop leberkas capicola porchetta bacon turducken ribeye landjaeger jerky doner tri-tip sirloin.",
	itemID1: 1,
	itemName1:"item1",
	category1:"cat1",
	SKU1: "12345",
	units1: "ea",
	unitCost1: 15,
	inStock1: true,
	description1: "Bacon ipsum dolor amet flank alcatra tenderloin beef doner. Bresaola capicola landjaeger pancetta. Ball tip drumstick beef ribs short loin swine filet mignon prosciutto short ribs ham hock venison biltong corned beef. Chuck bresaola beef ribs filet mignon. Flank corned beef biltong pork chop leberkas capicola porchetta bacon turducken ribeye landjaeger jerky doner tri-tip sirloin.",
	itemID2: 1,
	itemName2:"item1",
	category2:"cat1",
	SKU2: "12345",
	units2: "ea",
	unitCost2: 15,
	inStock2: true,
	description2: "Bacon ipsum dolor amet flank alcatra tenderloin beef doner. Bresaola capicola landjaeger pancetta. Ball tip drumstick beef ribs short loin swine filet mignon prosciutto short ribs ham hock venison biltong corned beef. Chuck bresaola beef ribs filet mignon. Flank corned beef biltong pork chop leberkas capicola porchetta bacon turducken ribeye landjaeger jerky doner tri-tip sirloin.",
	itemID3: 1,
	itemName3:"item1",
	category3:"cat1",
	SKU3: "12345",
	units3: "ea",
	unitCost3: 15,
	inStock3: true,
	description3: "Bacon ipsum dolor amet flank alcatra tenderloin beef doner. Bresaola capicola landjaeger pancetta. Ball tip drumstick beef ribs short loin swine filet mignon prosciutto short ribs ham hock venison biltong corned beef. Chuck bresaola beef ribs filet mignon. Flank corned beef biltong pork chop leberkas capicola porchetta bacon turducken ribeye landjaeger jerky doner tri-tip sirloin.",
	itemID4: 1,
	itemName4:"item1",
	category4:"cat1",
	SKU4: "12345",
	units4: "ea",
	unitCost4: 15,
	inStock4: true,
	description4: "Bacon ipsum dolor amet flank alcatra tenderloin beef doner. Bresaola capicola landjaeger pancetta. Ball tip drumstick beef ribs short loin swine filet mignon prosciutto short ribs ham hock venison biltong corned beef. Chuck bresaola beef ribs filet mignon. Flank corned beef biltong pork chop leberkas capicola porchetta bacon turducken ribeye landjaeger jerky doner tri-tip sirloin."

	};
	return rawData;
	};
	for (var i=1; i<=size; i++) {
		data.push(seedDemo(i));
	}
	return data;
}
		isc.TestDataGrid.create({
			ID: "supplyList",
			width:"100%",
			height:"50%"
		});
		isc.TestDataGrid.create({
			ID: "supplyList2",
			width:"100%",
			height:"50%"
		});
		
	isc.SectionStack.create({
		ID: "basicSection",
		width: "99%",
		height: "99%",
		autoDraw: true,
		sections: [
			{
				items: [supplyList, supplyList2],
				title: "Test",
				controls: [],
				expanded: true,
				canCollapse: false
			}
		]
	});
	</script>

</body>
</html>
    Tags: None
    #2
    Not sure what to make of this test case - it's just like many of our grid samples, which obviously perform fine.

    Make sure that you measure the render times *without* development tools enabled.

    Comment

      #3
      Originally posted by Isomorphic View Post
      Not sure what to make of this test case - it's just like many of our grid samples, which obviously perform fine.

      Make sure that you measure the render times *without* development tools enabled.
      I used an old-school, stopwatch style of testing and got: 3.45s, 3.76s, 3.43s. These times are not far off from the numbers Chrome was giving me.

      Comment

        #4
        OK, but again, many similar samples do not have this performance issue - if you can confirm that's the case, then you need to look for what's different about your environment that's causing performance to be abnormal.

        Comment

          #5
          Originally posted by Isomorphic View Post
          OK, but again, many similar samples do not have this performance issue - if you can confirm that's the case, then you need to look for what's different about your environment that's causing performance to be abnormal.
          The only example I can find is here: http://www.smartclient.com/docs/9.1/a/system/reference/SmartClient_Explorer.html#listsInlineData. This only shows one ListGrid and 3 columns, not two ListGrids and 25 columns each. All of the other examples I see for ListGrid are loading the data dynamically using a fetch.

          Everything I'm doing here should be right out of the box, those loading times I mentioned are on the attached script, not on my prod data. Are you not seeing >3s load times on this script?

          Comment

            #6
            As written, this test case draws both grids twice because of bad use of autoDraw (which is reported in the Developer Console).

            Even before fixing this, we see times that are less than half of yours.

            After fixing the problem, we see times well under a second - very reasonable for this many rows and columns being visible.

            Comment

            Previous template Next
            Working...
            X