How to speed up javascript table rendering?

Question

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);
    }
 }

Steve Wellens · Accepted Answer · 2014-01-28 04:21:07Z

3

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.

answered Jan 28, 2014 at 4:21

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

loxxy Over a year ago

And the performance difference would be : jsperf.com/dom-update-1-vs-dom-update-2

Elliot Bonneville · Accepted Answer · 2014-01-28 04:24:09Z

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);

LogPi · Accepted Answer · 2014-01-28 09:05:37Z

0

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

answered Jan 28, 2014 at 9:05

LogPi

7066 silver badges11 bronze badges

1 Comment

user234932 Over a year ago

I've tested something like this a while ago, and performance difference compared to creating dom nodes and doing appendChild() are the order of magnitude 10ms per circa 30k dom nodes (about a 10k rows with 2~4 elements per row). The time you gain while creating the HTML string is mostly lost when browser parses it to create DOM nodes.

Collectives™ on Stack Overflow

How to speed up javascript table rendering?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related