Topic: dhtml table update performance problem (Page 1 of 1)

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

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,

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

Best regards
Johan Ingströmer