So I have to render a table with 1000 rows and 1000 columns. Accordingly this link, it seems like the best way is to build the HTML string in javascript and then inserted it into the DOM all in one go. I made a simple example of this, and pare it with couple other methods. At the end, this is really the fastest way which I came out with. But still this is not satisfying enough. So my question is, is there a faster way, than the following example.

var startTime = new Date().getTime(),
    tableString = "<table>",
    body = document.getElementsByTagName('body')[0],
    div = document.createElement('div'),
    finalResult = 0,
    endTime = 0,
    result = 0;

for (row = 0; row < 1000; row += 1) {

    tableString += "<tr>";

    for (col = 0; col < 1000; col += 1) {

        tableString += "<td>" + "testing" + "</td>";
    }
    tableString += "</tr";
}

tableString += "</table>";
div.innerHTML = tableString;
body.appendChild(div);

endTime  = new Date().getTime();
console.log(endTime - startTime);

So I have to render a table with 1000 rows and 1000 columns. Accordingly this link, it seems like the best way is to build the HTML string in javascript and then inserted it into the DOM all in one go. I made a simple example of this, and pare it with couple other methods. At the end, this is really the fastest way which I came out with. But still this is not satisfying enough. So my question is, is there a faster way, than the following example.

var startTime = new Date().getTime(),
    tableString = "<table>",
    body = document.getElementsByTagName('body')[0],
    div = document.createElement('div'),
    finalResult = 0,
    endTime = 0,
    result = 0;

for (row = 0; row < 1000; row += 1) {

    tableString += "<tr>";

    for (col = 0; col < 1000; col += 1) {

        tableString += "<td>" + "testing" + "</td>";
    }
    tableString += "</tr";
}

tableString += "</table>";
div.innerHTML = tableString;
body.appendChild(div);

endTime  = new Date().getTime();
console.log(endTime - startTime);

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 6, 2013 at 6:39 sla55er asked Aug 6, 2013 at 6:31 sla55ersla55er 81111 gold badge1111 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

A massive amount of string concatenation will get you into runtime trouble, no matter what language. The fastet way will be to go through the native JavaScript DOM API, while constructing your table within a document fragment. At the end of your function, insert that document fragment at the desired position in your document.

Something like this will create a table with 1000 rows and 20 cells per row:

function makeTable() {
    var fragment = document.createDocumentFragment();

    for (var i = 0; i < 1000; i++) {
        var row = document.createElement('tr');
        fragment.appendChild(row);

        for (var j = 0; j < 20; j++) {
            var cell = document.createElement('td');
            cell.appendChild(document.createTextNode(i.toString() + ', ' + j.toString()));
            row.appendChild(cell);
        }
    }

    var target = document.getElementById('target');
    target.appendChild(fragment);
}

JSFiddle: http://jsfiddle/KbNLb/4/

EDIT Just saw you did 1000x1000 - that is one million cells, that will be slow no matter what. I really hope on million table cells is not your actual use case. ;-)