IE 6 is our corporate standard and everyone is required to use IE. We have discovered in one of our recent applications that performance is significantly degraded while manipulating/validating grid data on client side (using javascript). For instance, it takes more than 20 seconds to select a checkbox by looping through 120 rows of data. I am wondering is this is an IE DOM defeciency or is it something that can be improved in the grid (or perhaps in the script).
We have tested the this page in FireFox and the same code goes through the whole grid in less than 2 seconds (data modification) and less than one second for validation. Even though this response is slow but is acceptable to the users.
Could you please suggest a solution for the above?
Thanks
Hi metzgda ,
I saw your posting regarding performance in firefox compared to IE. I am having the same issues and also have a standard of IE at my company. Have you found any workaround for this? Were you able to increase the sorting/loading performance of the grid in IE?
Funny, we've been avoiding using any version of UltraWebGrid v7.3+ because all of a sudden sorting in our UltraWebGrid takes magnitudes longer than before. Even stranger, this timing occurs even though we are performing the sort server-side using our own code. The server-side code runs as quickly as before, but for some reason rendering the UltraWebGrid after performing a sort (v7.4+) can take 30+ seconds, whereas in v7.3 it takes only a second or two.
I never thought this might be an IE issue. After seeing this post, I tried our application on FireFox and sure enough, even when using a more recent version of UltraWebGrid (such as v8.1), response time is a quick 1-2 seconds. On IE, it can be 30+ seconds.
In my situation, there is nothing I can do because Infragistics must have added some client-side code that processes after sorting (even if sort was handled server-side). Any suggestions to get around this problem? Our company standard is IE so I can't force everyone to use FireFox.
Thanks!
Thankyou for a quick response .... Here is the code that brings the whole page to its knees .....
Any suggestion would be greatly appreciated.
var sDoingAll = 'no'; function fCollectAll(btnEl) { var startTime = new Date(); var oGrid = octl00xContentPlaceHolder1xgrid; oGrid.startHourGlass(); var oRows = oGrid.Rows; if(oRows.length > 20) { oGrid.hide(); alert("This will take about "+ Math.round(oRows.length/6) +" seconds. Wait until the grid re-appears."); } sDoingAll = 'yes'; oGrid.suspendUpdates(true); fCollectAll2(); oGrid.suspendUpdates(false); sDoingAll = 'no'; var endTime = new Date(); alert ("Time Elapsed : " + Math.ceil((endTime - startTime)/1000) + " seconds"); oGrid.show(); oGrid.stopHourGlass(); }
function fCollectAll2(btnEl) { var oGrid = octl00xContentPlaceHolder1xgrid; var oBands = oGrid.Bands; var oBand = oBands[0]; var oColumns = oBand.Columns; var oRows = oGrid.Rows; var total = oRows.length; var colCollected = oBand.getColumnFromKey("collected"); var indexCollected = colCollected.Index; var colMissed = oBand.getColumnFromKey("missed"); var indexMissed = colMissed.Index; var colCollectedDate = oBand.getColumnFromKey("collected_date"); var indexCollectedDate = colCollectedDate.Index;
var wdcCollDate = igdrp_getComboById(Prefix2+"wdcCollectedDate"); var CollectedDate = wdcCollDate.getValue();
for(i=0; i<oRows.length; i++) { oRow = oRows.getRow(i); oCellCollected = oRow.getCell(indexCollected); oCellMissed = oRow.getCell(indexMissed); if((oCellCollected.getValue()==0) && (oCellMissed.getValue()==0) && (oCellCollected.isEditable()) ) { oCellCollected.setValue(1,false); oRow.getCell(indexCollectedDate).setValue(CollectedDate,false); } } }
There are some key areas in IE where scripting/DOM manipulation is less then stellar. Here are a couple of things to watch out for.
String manipulation is very slow. Appending 1000 characters together is orders of magnitude slower than inserting 1000 characters into an array and performing a join on the array. Because of this, many script libraries (including Microsoft's AJAX Extensions) have a StringBuilder class that can be used.
Accessing objects in the DOM can be slow, and objects references aren't cached. This means if you have a line like foo.bar.childElements[0].firstChild, the entire chain must be processed each time. Add 4 of these lines in a row and you end up with very slow code. Avoid this scenario by caching references yourself.
As an example turn a.b.c.childElements[0].firstChild.style.backgroundColor=red;a.b.c.childElements[0].firstChild.style.fontFamily="verdana"; INTO var style=a.b.c.childElements[0].firstChild.style;style.backgroundColor=red;style.fontFamily="verdana";
As an example turn
a.b.c.childElements[0].firstChild.style.backgroundColor=red;a.b.c.childElements[0].firstChild.style.fontFamily="verdana";
INTO
var style=a.b.c.childElements[0].firstChild.style;style.backgroundColor=red;style.fontFamily="verdana";
Also, IE's InnerHTML method can be extremely slow. Because of this avoid scenarios where you're constantly appending to the InnerHTML string.
As an example, turn element.innerHTML+="<div>hello</div>";element.innerHTML+="<div>world</div>"; INTO var content="<div>hello</div>";content+="<div>world</div>";element.innerHTML=content;
As an example, turn
element.innerHTML+="<div>hello</div>";element.innerHTML+="<div>world</div>";
var content="<div>hello</div>";content+="<div>world</div>";element.innerHTML=content;
To make that even more efficient, use the string builder to build your content rather than string concats.
Also, be aware that the WebGrid uses a lazy create pattern on the client-side for all objects. A grid oRow object isn't created until it is requested. This may be the result of a user performing selection, or your code calling "getRow(i)". It sounds like you'll need to loop through each row so you can't avoid it, but it's good to be aware of it either way. I've also seen some minimal results changing a for loop from increasing to decreasing or making it a while loop. These optimizations really get down to the dirty details of the browsers's javascript implementation which means you're looking at a minimal gain - but still something that you may want to look at.
If you can't get the script running faster, post your code for the checkbox selection here and I'll give it a while on my end. We may even find some room for optimization on the grid side of things.