javascript peformance on string concatenation
<p>I read this <a href="http://oreilly.com/server-administration/excerpts/even-faster-websites/writing-efficient-javascript.html" rel="nofollow">article</a> about javasccript performance on string concatenation and scope variable so I rewrote some of my code the way it was suggested but <strong>the recommended way is MUCH slower</strong>. I'm testing using Chrome and IE: similar conclusion.</p>

<p>Basically, I have an object that contains strings and I'm loop through each value to generate HTML. The two ways I'm comparing are doing:</p>

<pre><code>var TheHTML = "";
TheHTML = TheHTML + ...;
</code></pre>

<p>and the other way is using an array and join</p>

<pre><code>TheHTML[i++] = ....;
</code></pre>

<p><strong>I have a <a href="http://jsfiddle.net/YKvAQ/" rel="nofollow">fiddle here</a>.</strong> The code I'm using looks like this:</p>

<pre><code>var ObjectTest = {};

ObjectTest.Key1 = "The Key 1";
ObjectTest.Key2 = "The Key 2";
ObjectTest.Key3 = "The Key 3";
ObjectTest.Key4 = "The Key 4";
ObjectTest.Key5 = "The Key 5";

function TestSpeed() {

    var TheHTML1 = "";
    var THeHTML2 = "";

    var TheStart1 = new Date().getTime();
    for (var TestPerf1 = 0; TestPerf1 &lt; 100000; TestPerf1++) {

        TheHTML1 = "";
        TheHTML1 = TheHTML1 + '&lt;div style="clear:both"&gt;' + ObjectTest.Key1 + '&lt;/div&gt;';
        TheHTML1 = TheHTML1 + '&lt;div style="clear:both"&gt;' + ObjectTest.Key2 + '&lt;/div&gt;';
        TheHTML1 = TheHTML1 + '&lt;div style="clear:both"&gt;' + ObjectTest.Key3 + '&lt;/div&gt;';
        TheHTML1 = TheHTML1 + '&lt;div style="clear:both"&gt;' + ObjectTest.Key4 + '&lt;/div&gt;';
        TheHTML1 = TheHTML1 + '&lt;div style="clear:both"&gt;' + ObjectTest.Key5 + '&lt;/div&gt;';
        TheHTML1 = TheHTML1 + '&lt;br&gt;&lt;br&gt;';

    }
    document.getElementById('TestOutput1').innerText = new Date().getTime() - TheStart1;
    document.getElementById('Output1').innerHTML = TheHTML1;


    var TheStart2 = new Date().getTime();
    var ObjectTestCopy = ObjectTest;

    for (var TestPerf2 = 0; TestPerf2 &lt; 100000; TestPerf2++) {

        var Test = [];
        var i = 0;

        Test[i++] = '&lt;div style="clear:both"&gt;' + ObjectTestCopy.Key1 + '&lt;/div&gt;';
        Test[i++] = '&lt;div style="clear:both"&gt;' + ObjectTestCopy.Key2 + '&lt;/div&gt;';
        Test[i++] = '&lt;div style="clear:both"&gt;' + ObjectTestCopy.Key3 + '&lt;/div&gt;';
        Test[i++] = '&lt;div style="clear:both"&gt;' + ObjectTestCopy.Key4 + '&lt;/div&gt;';
        Test[i++] = '&lt;div style="clear:both"&gt;' + ObjectTestCopy.Key5 + '&lt;/div&gt;';
        Test[i++] = '&lt;br&gt;&lt;br&gt;';

        TheHTML2 = Test.join("");
    }
    document.getElementById('TestOutput2').innerText = new Date().getTime() - TheStart2;
    document.getElementById('Output2').innerHTML = TheHTML2;
}

window.onload = function () { TestSpeed(); }
</code></pre>

<p><strong>Why is the suggested code slower?</strong></p>
