Slow Load from Javascript

Has anyone dynamically built and loaded large amounts of data from a javascript array? I am building an array of 3,100 rows, 24 columns, with embedded HREFs and javascript and tooltips that make many of the cells 300 characters or more (one, with embedded tables in it, is actually 1,000 characters - expanded tooltip). The grid takes 90+ seconds to load.

I have replaced the code that reads from a database to populate the cells and instead just put "a" in each cell. That grid loads in one second. However, if I replace that "a" with 100 a's then it slows down again. Seems to be an issue with the overall size of the javascript array. (Is this an issue because it is embedded in the resulting HTML and thus must be rendered by the browser?)

I tried a similar test with CSV and XML files, and loading with 100 characters per cell is a bit slower, but quite acceptable (2 to 3 seconds). My problem with that is I do not know how to embed all of the HREFs and javascript events in those files.

I was thinking perhaps I could modify the CSV model to only process tab-separated fields (making it easier to possibly embed my complex links), but I am not sure if that is beyond my capabilities at this point.

My users have seen the functionality of the grid and are quite happy with it, so I certainly do not want to abandon it. I need to resolve this scalability issue.

Any ideas out there?

Thanks in advance - Brian

Following is a typical line from my javascript array:

["<a href=\"MyApp_Cont_Data.cfm?reference_no=40034993&site=ES&context1=UNB&context2=month\" title=\"Branch to Contract Data screen, with Unbilled Reasons/Amts\" onMouseOver=\"window.status=\'Branch to Contract Data screen, with Unbilled Reasons/Amts\'; return true\" onMouseOut=\"window.status=\'\'; return true\">40034993&nbsp;</a>",
"ChrgNo-51423",
"ZCPC",
"10",
"New Business",
"2380",
"ES",
"5424: NE Sales Region",
"CC8001: Electronics",
"NONE",
"NONE",
"NONE",
"ChrgNo-51423",
"<a href=\'javascript:;\' title=\'Update PP Billing Complete\' onClick=\"MM_openBrWindow(\'MyApp_Update_Cont_Data.cfm?reference_no=40034993&site=ES\',\'\',\'menubar=yes,scrollbars=yes,width=550,height=450,left=10,top=10\')\" onMouseOver=\"window.status=\'Update PP Billing Complete\'; return true\" onMouseOut=\"window.status=\'\'; return true\">N</a>",
"<a href=\'javascript:;\' onClick=\"MM_openBrWindow(\'MyApp_Add_Unbilled.cfm?reference_no=40034993&chrg_no=ChrgNo-51423&site=ES&profit_ctr=2380&period=month\', \'MyApp2\',\'menubar=yes,resizable=yes,toolbar=no,scrollbars=yes,width=1200,height=700,left=10,top=10\')\" title=\'Input Unbilled Reasons/Amts\' onMouseOver=\"window.status=\'Input Unbilled Reasons/Amts\'; return true\" onMouseOut=\"window.status=\'\'; return true\">$39,248.64</a>",
"<a href=\'javascript:;\' onmouseover=\"Tip(\'<table border=\\'1\\' cellpadding=\\'2\\' cellspacing=\\'0\\' bordercolor=\\'#666666\\' bgcolor=\\'#FFFFCC\\'><tr><td valign=\\'top\\'><strong>Description</strong></td><td>Cost Plus, Progress Payment, and T&M contracts that have not billed in its normal cycle.</td></tr><tr><td valign=\\'top\\'><strong>Cont Type(s)</strong></td><td>ZCPC, ZTMC, ZPPC</td></tr><tr><td valign=\\'top\\'><strong>Actionee(s)</strong></td><td>PF/CTC</td></tr><tr><td valign=\\'top\\'><strong>Recommended Action</strong></td><td>Program Finance: Contact Billing Analyst to find out why contract is not billing.</td></tr><tr><td valign=\\'top\\'><strong>Source</strong></td><td>Bill Period entered in MyApp, invoices from SAP BW report \\'Billing Docs Through Date\\'.</td></tr><tr><td valign=\\'top\\'><strong>Autoloaded</strong></td><td>Yes</td></tr></table>\', TITLE, \'330 - Inactive Billing\', WIDTH, 500, BGCOLOR, \'#ffffcc\')\" onmouseout=\"UnTip()\">Inactive Billing</a>",
"Contract Terms / Performance",
"NONE",
"Sched C",
"<a href=\'javascript:;\' onmouseover=\"Tip(\'Project not stand-alone. Rate differential to be reconciled in closure. See offsetting balance in \\\'Est. Booked vs Billed Fee Rates\\\'\', TITLE, \'Full Comment Text\', WIDTH, 500, BGCOLOR, \'#ffffcc\')\" onmouseout=\"UnTip()\">Project not stand-alone. Rate differential to be reconciled in closure. See offsetting balance in \\\'Est. Booked vs Billed Fee Rates\\\'</a>",
" 0",
"<a href=\'javascript:;\' onClick=\"javascript:MM_openBrWindow(\'MyApp_Add_Action_Item.cfm?reference_no=40034993&chrg_no=ChrgNo-51423&site=ES&context=UNB&problem_category_id=330&problem_category_desc=Inactive Billing\',\'\',\'menubar=yes,scrollbars=no,width=800,height=250,left=10,top=10\');\" title=\'Create Action Item\' onMouseOver=\"window.status=\'Create Action Item\'; return true\" onMouseOut=\"window.status=\'\'; return true\">CREATE</a>",
"<a href=\'javascript:;\' title=\'Add Comment\' onClick=\"MM_openBrWindow(\'MyApp_Add_Comment.cfm?reference_no=40034993&chrg_no=ChrgNo-51423&site=ES&context=UNB&problem_category_id=330&problem_category_desc=Inactive Billing\',\'\',\'menubar=yes,scrollbars=no,width=800,height=250,left=10,top=10\');\" onMouseOver=\"window.status=\'Add Comment\'; return true\" onMouseOut=\"window.status=\'\'; return true\">ADD</a>",
"#ffffff",],

It looks like IE creates large js arrays much faster if you put each line into a separate script block -

<script>
// start with empty array
var data = [];
</script>

<script>
// add one record
data.push(["<a href=\"MyApp...",
"...",
"...",
"..."]);
</script>

<script>
// add another one
data.push(["<a href=\"MyApp...",
"...",
"...",
"..."]);
</script>

<script>
// repeat 3000 times :-)
</script>

<script>
    // create grid control

    var obj = new AW.UI.Grid;
    obj.setCellData(data);

    obj.setColumnCount(24);
    obj.setRowCount(data.length);

    document.write(obj);
</script>

Alex,

Thanks a MILLION (or at least, a $500 license fee). Splitting the <script> has reduced my time to load the grid to 10 seconds. I'll live with that. After all, we are loading A TON of data.


Kindest regards,

Brian

Further suggestions -

Try first writing an empty grid and start loading the data array only at the end of the page when the page rendering is mostly completed (just before the closing </body> tag). Refresh the grid when data loading is complete. This way the end user may get better impression of the page loading time.

<body>
...
<script>
    // writing an empty grid ...
    var obj = new AW.UI.Grid;
    obj.setCellData([["Loading..."]]);
    obj.setColumnCount(24);
    obj.setRowCount(1);
    document.write(obj);

    // creating data array
    var data = [];
</script>
<p> The rest of the page is here ... </p>

<script>data.push(["Record 1", "..."]);</script>
<script>data.push(["Record 2", "..."]);</script>
...
<script>data.push(["Record 3000", "..."]);</script>

<script>
    // refresh the grid with the actual data
    obj.setCellData(data);
    obj.setRowCount(data.length);
    obj.refresh();
</script>
</body>
</html>

Also you can try writing 10 or 100 records per script block instead of 1. I am not sure if that will reduce loading time but it may improve page responsiveness after the data is loaded.

or
- start with empty grid
- refresh after first 100 records
- refresh again after all data is loaded

Alex,

Thanks for the suggestions. After changing the process to write each array element separately as you suggested, the load time dropped dramatically. Unfortunately, today I am back to 38 seconds for 1,500 rows. The page appears to be rendered, the outline of the grid (including headers) is shown, but another 38 seconds before any data is shown.

My latest test shows that by removing one of the tooltips (quite complex, with 5 data fields for descriptions within a nested table structure) the grid renders in 4 seconds for 1,500 rows. I think I will change the tooltip to instead be an onClick event of opening a new page that will house the creation of the complex table.

Thanks for your help and the great tool. I think the usefulness and appearance of our reports have been improved.