CODEWITHSUNDEEP
javascripthtmlperformancehtml-table
kempchee
kempchee

Reputation: 470

How to speed up javascript table rendering?

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

Answers (3)

LogPi
LogPi

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

Elliot Bonneville
Elliot Bonneville

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

Steve Wellens
Steve Wellens

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

Related Questions