Info

Testing DOM table generation speed with various methods.

Preparation code

<style>
.hidden
{
        display: none;
}
</style>
<div class="hidden" id="container"></div>
<script>
  Benchmark.prototype.setup = function() {
    function generateTable ()
    {
        var table = document.createElement("table"),
        body = document.createElement("tbody"),
        row = document.createElement("tr"),
        cell = document.createElement("td");
        row.appendChild(cell);
        body.appendChild(row);
        table.appendChild(body);
        return table;
    }
    var container = document.getElementById("container");
    function generateString ()
    {
        var string = "<table>";
        string += "\r\t<tbody>";
        string += "\r\t\t<tr>";
        string += "\r\t\t\t<td></td>";
        string += "\r\t\t</tr>";
        string += "\r\t</tbody>";
        string += "\r</table>";
        return string;
    }
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

container.innerHTML = generateString();
container.innerHTML = "";

var table = generateTable();
container.appendChild(table);
container.removeChild(table);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Matt McDonald on 11th December 2011
• Revision 6: published on 17th April 2013

0 comments