Reputation: 470
I am building a large table on page load using javascript and I'm currently able to load the table portion in around 2 secs(on my machine of course). However, I was hoping it would be even faster. Any suggestions for improvement?
var fragment = document.createDocumentFragment();
var table=document.createElement('table')
table.className="table-bordered"
fragment.appendChild(table)
var body=document.createElement('tbody')
table.appendChild(body)
for (var i = 0; i < 200; i++) {
var row = document.createElement('tr');
body.appendChild(row);
for (var j = 0; j < 100; j++) {
var cell = document.createElement('td');
if(j!==0)
{cell.id="row"+i.toString()+"col"+(j-1).toString()
cell.className="myclass"
}
row.appendChild(cell);
}
}
Upvotes: 1
Views: 1904
Reputation: 706
You can use
var inner_text = "<table><tbody>";
while(i--) {
var row = "";
row += "<tr> ";
while(j--) {
if(j !== 0) {
row +='<td ' + 'id="' + ["row", i, "col", (j - 1)].join("") +'"class="myClass"></td>';
}else{
row +='<td>' + '</td>';
}
}
row +=" </tr>";
inner_text +=row;
j = 100;
}
inner_text +="</tbody></table>";
That will reduce time to make new Element, append child. Hope it helps you
Upvotes: 0
Reputation: 53371
It's likely the DOM rendering that's the bottleneck, so improving your code probably won't help much. However, I can suggest a few changes:
// declare all variables at head of code section--won't increase speed, but is good practice
var fragment = document.createDocumentFragment(),
table = document.createElement('table'),
body = document.createElement('tbody'),
i = 200,
j = 100,
row, cell;
table.className = "table-bordered";
table.appendChild(body);
// reverse while loop is faster than a traditional for loop
while(i--) {
row = document.createElement('tr');
body.appendChild(row);
while(j--) {
cell = document.createElement('td');
if(j !== 0) {
cell.id = ["row", i, "col", (j - 1)].join(""); // here we're joining an array instead of concatenating
// a string. Results in a minor improvement in speed.
cell.className = "myclass";
}
row.appendChild(cell);
}
j = 100;
}
// appending the table to the fragement after it's built means we don't modify the dom with each iteration of the below loops--this is
// probably the single largest improvement in speed
fragment.appendChild(table);
Upvotes: 1
Reputation: 20638
Try moving this line: fragment.appendChild(table)
to the very end of the code.
Otherwise, you are updating a table that is attached to the DOM and it may be trying to re-render things every time you add a new element.
Upvotes: 3