dom-methods vs innerHTML

JavaScript performance comparison

Revision 2 of this test case created by danik

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    function dom(){
    var table, row, data;
     
    table = document.createElement('table');
    table.border = 1;
    for (var k = 0; k < 4; k++) {
        row = document.createElement('tr');
        for (var m = 0; m < 5; m++) {
            data = document.createElement('td');
            data.textContent = "строка " +k+"; яч "+m;
            row.appendChild(data);
        }
        table.appendChild(row);
    }
    }
   
    function html(){
    var strTabl="", table;
        for (k = 0; k < 4; k++) {
            strTabl+= "<tr>";
            for (m = 0; m < 5; m++) {
                 strTabl+= "<td>"+"строка " +k+"; яч "+m+"</td>";
            }  strTabl+=  "</tr>";
        }
        table = document.createElement('table');
        table.innerHTML = strTabl;
    }
   
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Create Table using DOM methods
dom();
pending…
Create Table using innerHTML
html();
pending…

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:

0 comments

Add a comment