Current mood:	accomplished
Entry tags:	javascript, programming

javascript table creation benchmarks

JavaScript Table Creation Benchmarks

The purpose of this exercise is to find out the fastest way to create html tables with javascript.

I am testing 3 methods of creating a table: pure DOM, strings with innerHTML, and a DOM + innerHTML hybrid, where an off-screen table is constructed using strings and then the rows are copied into the body of the target table. Each test is run with 2 options: with and without content, to estimate which method is better for creating empty tables and populating them later as opposed to creating the tables where the content is known at the time of creation. To benchmark real-world performance, the end time is take after a small timeout to allow the table to render. Additionally, each test is run with and without styles to measure the impact of some common css rules.

Test 1. DOM.

function domTestWithContent(cnt) {
    domTableTest(cnt, true);
}

function domTestWithoutContent(cnt) {
    domTableTest(cnt, false);
}

Using cloneNode() whereever possible to avoid the overhead of document.createElement. This turns out quite a bit faster than body.insertRow and row.insertCell. The difference between creating the table with and without content is quite big: setting the data requires a loop through all the cells after the table is constructed.

/** 
    cnt: an element where to place the result
    setCellContent: pass true to populate cells with "row, column" 
*/
function domTableTest(cnt, setCellContent) {
    if (typeof(setCellContent) == "undefined")
        setCellContent = false;

    var tab = document.createElement("TABLE");
    var bod = document.createElement("TBODY");
    tab.appendChild(bod);
    for (var r = 0; r < rows; r++) {
        if (r == 0) {
            var row = bod.insertRow(-1);
            for (var c = 0; c < columns; c++) {
                if (c == 0) {
                    var cell = row.insertCell(-1);
                    if (setCellContent)
                        cell.appendChild(document.createTextNode("\u00A0"));
                }
                else {
                    cell = row.firstChild.cloneNode(true);
                    row.appendChild(cell);
                }
                if (setCellContent)
                    cell.firstChild.nodeValue = r + ", " + c;
            }
        }
        else {
            var row = bod.firstChild.cloneNode(true);
            if (setCellContent) {
                var cell = row.firstChild;
                var c = 0;
                while (cell) {
                    cell.firstChild.nodeValue = r + ", " + c;
                    cell = cell.nextSibling;
                    c++;
                }
            }
            bod.appendChild(row);
        }
    }
    cnt.appendChild(tab);
}

Test 2. innerHTML.

function stringTestWithContent(cnt) {
    stringTableTest(cnt, true);
}

function stringTestWithoutContent(cnt) {
    stringTableTest(cnt, false);
}

Using arrays to speed up strings performance. Push() may not be the fastest way to add array elements but I believe the overhead is negligible in this context. There is practically no difference between populating the cells with real data or blanks.

/*
    cnt: the element where to place the result
    setCellContent: send true to populate cells with "row, column"
*/
function stringTableTest(cnt, setCellContent) {
    if (typeof(setCellContent) == "undefined")
        setCellContent = false;
    
    var buffer = new Array();
    buffer.push("<TABLE>");
    buffer.push("<TBODY>")
    for (var r = 0; r < rows; r++) {
        buffer.push("<TR>");
        for (var c = 0; c < columns; c++) {
            buffer.push("<TD>");
            if (setCellContent) 
                buffer.push(r + ", " + c);
            else
                buffer.push("&nbsp;");
            buffer.push("</TD>");
        }
        buffer.push("</TR>");
    }
    buffer.push("</TBODY></TABLE>");
    cnt.innerHTML = buffer.join("");
}

Test 3. innerHTML + DOM.

function hybridTestWithContent(cnt) {
    stringTableTest3(cnt, true);
}

function hybridTestWithoutContent(cnt) {
    stringTableTest3(cnt, false);
}
</cde>

function hybridTableTest(cnt, setCellContent) {
    if (typeof(withstyle) == "undefined")
        withstyle = false;

    var tab = document.createElement("TABLE");
    cnt.appendChild(tab);

    var buffer = new Array();
    buffer.push("<TABLE><tbody>")
    for (var r = 0; r < rows; r++) {
        buffer.push("<tr>");
        for (var c = 0; c < columns; c++) {
            buffer.push("<td>");
            if (setCellContent) 
                buffer.push(r + ", " + c);
            else
                buffer.push("&nbsp;");
            buffer.push("</td>");
        }
        buffer.push("</tr>");
    }
    buffer.push("</tbody></TABLE>");
    
    // create the table in an off-screen div 
    var node = document.createElement("DIV");
    var s = buffer.join("");
    node.innerHTML =  s;
    
    // copy rows
    var oldB = document.createElement("TBODY");
    tab.appendChild(oldB);
    var newB = node.firstChild.firstChild;
    for (var i = 0; i < rows; i++) {
        var r = newB.firstChild;
        oldB.appendChild(r);
    }
}

var rows = 300;
var columns = 30;
var loops = 3;
var needStyles = false;
var tests = [   domTestWithContent,     domTestWithoutContent,
                stringTestWithContent,  stringTestWithoutContent, 
                hybridTestWithContent,  hybridTestWithoutContent
            ];

function run() {
    var contentElement = document.getElementById("cnt");
    // set (or unset) the class of the target element, to test with or without styles 
    setStyle(contentElement, "withstyle", needStyles);
    var testTimes = new Array(tests.length);
    for (var j = 0; j < testTimes.length; j++)
       testTimes[j] = 0;
    var i = 0;
    var loop = 0;
    
    // this function will be invoked to run each test
    runOneTest = function() {
        // empty the target element
        while (contentElement.firstChild)
            contentElement.removeChild(contentElement.firstChild);
        // start time
        var d1 = (new Date()).getTime();
        // run the test
        tests[i](contentElement);
        
        setTimeout(function() {
            // take the 2nd time measurement after rendering is done
            var d2 = (new Date()).getTime();
            testTimes[i] += (d2 - d1);
            
            i++;
            if (i < tests.length)
                // run the next test in tests array
                runOneTest();
            else if (loop < loops) {
                // run the tests again 
                loop++;
                i = 0;
                runOneTest();
            }
            else {
                // calculate averages and show results
                for (var k = 0; k < testTimes.length; k++)
                    testTimes[k] = Math.round(testTimes[k]/loops);
                showResults(testTimes);
                if (!needStyles) {
                    // chain the 2nd test
                    // not pretty but does the trick
                    needStyles = true;
                    run();
                }
            }
        }, 1);
    };
    
    runOneTest()
}

.withstyle {
}

.withstyle TABLE {
  border-collapse: collapse;
} 

.withstyle TD {
   border: solid 1px black;
   white-space: nowrap;
   width: 55px;
   font-family: Sans-serif;
   font-size: 10px;
}

run();

Run the test here: http://www.benya.com/code/jsbenchmarks/tables.html and post your results. I'd love to see how Safari fares, especially compared to some other browser running on the same platform.