Topic: dhtml table update performance problem Pages that link to <a href="https://ozoneasylum.com/backlink?for=32020" title="Pages that link to Topic: dhtml table update performance problem" rel="nofollow" >Topic: dhtml table update performance problem\

 
Author Thread
jingstromer
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Oct 2010

IP logged posted posted 10-14-2010 09:07 Edit Quote

Hello,

I have a javascript function that modifies a small part of a large (>1000 rows) table by using dhtml. It is very slow, 15 seconds to modify 84 rows of the table on a regular desktop computer (4GB ram). If the table is smaller it is a lot faster to modify the same amount of rows, which leads me to believe that somehow the whole table is recalculated by the browser every time a row is updated. Is there a way to avoid this and have the recalculation of the table done only once all updates are finished?

The function looks like this:

function OnACalcComplete2(result, userContext, methodName) {
var grid = document.getElementById('<%=GridView1.ClientID%>');
var arrResult = result.split("\r\n");
// Update grid
var i = 0;
var gridIndex = 0;
var arrResultRow;
var arrCell;
var gridRow = grid.rows[0];
for (i = 0; i < arrResult.length; i++) {
arrResultRow = arrResult[i].split("\t");
gridIndex = arrResultRow[0];
gridRow = grid.rows[gridIndex];
arrCell = arrResultRow[arrResultRow.length - 1].split(";");
gridRow.cells[gridRow.cells.length - 1].innerText = arrCell[0]; // This is the slow part
}
}

Is there some possibility to do for instance "Deactivate html parser" before the update and "Activate after"?

Best regards
Johan Ingströmer

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 10-14-2010 10:27 Edit Quote

Although some browsers are smart enough to batch such operations, you can bet it's a reflow party.

Toggle the display of the table by switching it's style.display to 'none' and back to '' when you're done. That way there will be only 2 reflows no matter the amount of table cells you touch.

Also, note that you should use .textContent instead of .innerText

HTH,

jingstromer
Obsessive-Compulsive (I) Inmate

From:
Insane since: Oct 2010

IP logged posted posted 10-15-2010 09:10 Edit Quote

That was a great advice, took away almost all the execution time!
thanks a lot

Best regards
Johan Ingströmer

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

IP logged posted posted 05-31-2011 10:59 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu