I have code that looks something like this:
var myTable = $("<table></table>");
//... code to populate the table ...
for (var x=0; x < someArray; x++) {
var curItem = someArray[x];
//PROBLEM LINE
var targetRow = $("#prefix" + curItem.id, myTable);
//. . . further code . . .
}
Now my array is an array of some 300+ objects. (fair size table). What
I'm noticing is that the problem line (where I'm getting the row
reference) is taking approx 1000 ms to find my targetRow. (dropped in
some console.log's dumping timestamps) With some 300+ iterations, it
should be plain this loop is damn slow. Rendering my table outright
stalls the browser - some 20 minutes and no joy.
As a test, I tried to render the table to the page before my loop and
modified my assignment line accordingly:
$("#myContainer").append(myTable);
// . . .
var targetRow = $("#prefix" + curItem.id, myTable);
with this approach the time to find the row reference is much shorter.
I can now render my table in less than 20 seconds (which is fine given
the size of the table and other processing happening).
Why such a difference between rendered code and in memory code? I would
think the in memory code would be tons faster. OR does it have
something to do with that code not being on the DOM yet, so not able to
take advantage of DOM optimizations?
As an aside, I'd appreciate any hints/tips on speeding up this routine.
Given that it's such a small snapshot of the overall routine... :)
Thanks for any tips or enlightenment.
Shawn
