advertisement

Article:
  Dynamic HTML Tables: Improving Performance
Subject:   Even faster
Date:   2003-08-07 15:11:21
From:   jconradmn
1. Scalability of Array
I found that by boosting the count from 500 to 1000, you see even more of a pronounced difference in speed. The large string in 4 goes from (your numbers may vary) 3 s to 19 s (6x). That scales faster than using an array, which scales from .3 s to .9 s (3x).


2. Declining benefit of Array
Using an array helps. For me, building a string array was about 9 times faster than using the string addition in #4. However, I also saw an increase of 120 ms by using a hybrid. That is, using one array element per TR string instead of one for each TD.


3. Having the line in javascript be a single line, if you can bear with the loss of readability, contributed another 50 ms reduction.


Here is my reduced function,


// Approach #4f
// Assemble entire table element as fewest HTML strings as part of an array.
// Also saving object into a variable during each iteration.
// Also using a while decrement.
// jeff.conrad@lawson.com


function makeTableApproach4f() {
clearTimers();
if (document.body.innerHTML) {
document.getElementById("deleteTime").firstChild.nodeValue = "not applicable";
timer.createLoopStart = new Date();

var output = new Array();


var t = null;
var j = tableData.length;
while(--j >= 0)
{
t = tableData[j];
output [j] = "<tr class='tr" + (j%2) + "'><td class='col0'>" + t.alpha + "</td><td class='col1'>" + t.beta + "</td><td class='col2'>" + t.gamma + "</td><td class='col3'>" + t.delta + "</td><td class='col4'>" + t.epsilon + "</td></tr>";
}


var table = "<table id='myTable1'><tbody id='myTbody'>"
+ output.join("")
+ "</tbody></table>"
;
output = null;
timer.populateStart = new Date();
document.getElementById("tableWrap2").innerHTML = table;
timer.end = new Date();
showTimes("Approach #4f");
} else {
alert("This test not supported in the current browser.");
}
}


Thanks for this article, it is very timely.


1 to 1 of 1
  1. Even faster
    2003-11-04 06:00:16  anonymous2 [View]

1 to 1 of 1