String concatenation perfrmance

by Alon Rotem

HTML

<input type="button" id="btnStartPlus" value="Use +"></input>
<input type="button" id="btnStartConcat" value="Use concat"></input>
<input type="button" id="btnStartJoin" value="Use array join"></input>
<div id="results"><div>Results:</div></div>

CSS

body
{
    font-family: verdana;
    font-size: small;
}
#results{
    border: 1px solid black;
    padding: 2px;
    margin: 2px;
}
#results div{
    background-color:black;
    color: white;
    padding: 2px;
}

JavaScript

function writeLine(str)
{
    $("#results").html($("#results").html() + str + "<br/>");
}

var numOfIterations = 10000000;
var stringToConcat = "Lorem ipsum";

function startPlus()
{
    var lipsum = "";
    var startAt = new Date();    
    for(var i=0; i < numOfIterations; i++)
    {
        lipsum += stringToConcat;
    }
    var now = new Date();
    writeLine("Method: + , Rounds: " + numOfIterations + ", elapsed time: " + (now - startAt) + "ms");
}

function startConcat()
{
    var lipsum = "";
    var startAt = new Date();
    for(var i=0; i < numOfIterations; i++)
    {
        lipsum.concat(stringToConcat);
    }
    var now = new Date();
    writeLine("Method: concat , Rounds: " + numOfIterations + ", elapsed time: " + (now - startAt) + "ms");
}

function startJoin()
{
    var arr = new Array();
    for(var i=0; i < numOfIterations; i++)
    {
        arr[i] = stringToConcat;
    }
    var startAt = new Date();
    var lipsum = arr.join("");
    var now = new Date();
    writeLine("Method: join arrays , Rounds: " + numOfIterations + ", elapsed time: " + (now - startAt) + "ms");
}

$(function() {
    $( "#btnStartPlus" ).click(startPlus);
    $( "#btnStartConcat" ).click(startConcat);
    $( "#btnStartJoin" ).click(startJoin);
});