concat vs + vs join

JavaScript performance comparison

Revision 12 of this test case created

Info

How to concat strings faster.

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var html = "",today="today",clear="clear",ok="ok";
};

Benchmark.prototype.teardown = function() {
    html = "";
};
</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
concat
html = html.concat(
                                                        '<div id="calendar">'
                                                        ,'<div class="mainCal">'
                                                        ,'<div class="headCal">'
                                                        ,'<table width="100%" border="0" cellpadding="0" cellspacing="2">'
                                                        ,'<tr>'
                                                        ,'<td><div><select name="year" class="year"></select></div><div><table style=\'margin-top:3px\' border="0" cellpadding="0" cellspacing="0"><tr><td id="nextY">&nbsp;</td></tr><tr><td id="prevY">&nbsp;</td></tr></table></div></td>'
                                                        ,'<td><div><select name="month" class="month"></select></div><div><table style=\'margin-top:4px\' border="0" cellpadding="0" cellspacing="0"><tr><td id="nextM">&nbsp;</td></tr><tr><td id="prevM">&nbsp;</td></tr></table></div></td>'
                                                        ,'<td width="20"><span class="close">&nbsp;</span></td>'
                                                        ,'</tr>'
                                                        ,'</table>'
                                                        ,'</div>'
                                                        ,'<div class="bodyCal">'
                                                        ,'<dl class="dayNames"><dt>Sun</dt><dt>Mon</dt><dt>Tue</dt><dt>Wed</dt><dt>Tur</dt><dt>Fri</dt><dt>Sat</dt></dl>'
                                                        ,'<dl class="days">Calendar Options</dl>'
                                                        ,'<div style="clear:both;height:0;line-height:0"></div>'
                                                        ,'<div class="tm">'
                                                        ,'<ul class="hh">'
                                                        ,'<li>0</li>'
                                                        ,'<li>1</li>'
                                                        ,'<li>2</li>'
                                                        ,'<li>3</li>'
                                                        ,'<li>4</li>'
                                                        ,'<li>5</li>'
                                                        ,'<li>6</li>'
                                                        ,'<li>7</li>'
                                                        ,'<li>8</li>'
                                                        ,'<li>9</li>'
                                                        ,'<li>10</li>'
                                                        ,'<li>11</li>'
                                                        ,'<li>12</li>'
                                                        ,'<li>13</li>'
                                                        ,'<li>14</li>'
                                                        ,'<li>15</li>'
                                                        ,'<li>16</li>'
                                                        ,'<li>17</li>'
                                                        ,'<li>18</li>'
                                                        ,'<li>19</li>'
                                                        ,'<li>20</li>'
                                                        ,'<li>21</li>'
                                                        ,'<li>22</li>'
                                                        ,'<li>23</li>'
                                                        ,'</ul>'
                                                        ,'<ul class="mm">'
                                                        ,'<li>0</li>'
                                                        ,'<li>5</li>'
                                                        ,'<li>10</li>'
                                                        ,'<li>15</li>'
                                                        ,'<li>20</li>'
                                                        ,'<li>25</li>'
                                                        ,'<li>30</li>'
                                                        ,'<li>35</li>'
                                                        ,'<li>40</li>'
                                                        ,'<li>45</li>'
                                                        ,'<li>50</li>'
                                                        ,'<li>55</li>'
                                                        ,'</ul>'
                                                        ,'<ul class="ss">'
                                                        ,'<li>0</li>'
                                                        ,'<li>10</li>'
                                                        ,'<li>20</li>'
                                                        ,'<li>30</li>'
                                                        ,'<li>40</li>'
                                                        ,'<li>50</li>'
                                                        ,'</ul>'
                                                        ,'</div>'
                                                        ,'</div>'
                                                        ,'<div class="footCal">'
                                                        ,'<table class="time">'
                                                        ,'<tr>'
                                                        ,'<td>'
                                                        ,'<input type="text" class="hh" maxlength="2" start="0" end="23"/>:'
                                                        ,'<input type="text" class="mm" maxlength="2" start="0" end="59"/>:'
                                                        ,'<input type="text" class="ss" maxlength="2" start="0" end="59"/>'
                                                        ,'</td>'
                                                        ,'<td><ul><li class="up">&and;</li><li class="down">&or;</li></ul></td>'
                                                        ,'</tr>'
                                                        ,'</table>'
                                                        ,'<button id="todayBtn" type="button" class="btn">'
                                                        , today                                                 ,'</button>'
                                                        ,'<button id="clearBtn" type="button" class="btn">'
                                                        , clear                                                 ,'</button>'
                                                        ,'<button id="okBtn" type="button" class="btn">'
                                                        ,ok                                                     ,'</button>'
                                                        ,'<div>'
                                                        ,'</div>'
                                                        ,'</div>'
                                                                   );
pending…
+
html = ''
                                        +'<div id="calendar">'
                                        +'<div class="mainCal">'
                                        +'<div class="headCal">'
                                        +'<table width="100%" border="0" cellpadding="0" cellspacing="2">'
                                        +'<tr>'
                                        +'<td><div><select name="year" class="year"></select></div><div><table style=\'margin-top:3px\' border="0" cellpadding="0" cellspacing="0"><tr><td id="nextY" class="background-position:-1px -20px">&nbsp;</td></tr><tr><td id="prevY" class="background-position:-1px -40px">&nbsp;</td></tr></table></div></td>'
                                        +'<td><div><select name="month" class="month"></select></div><div><table style=\'margin-top:4px\' border="0" cellpadding="0" cellspacing="0"><tr><td id="nextM" class="background-position:-1px -20px">&nbsp;</td></tr><tr><td id="prevM">&nbsp;</td></tr></table></div></td>'
                                        +'<td width="20"><span class="close">&nbsp;</span></td>'
                                        +'</tr>'
                                        +'</table>'
                                        +'</div>'
                                        +'<div class="bodyCal">'
                                        +'<dl class="dayNames"><dt>Sun</dt><dt>Mon</dt><dt>Tue</dt><dt>Wed</dt><dt>Tur</dt><dt>Fri</dt><dt>Sat</dt></dl>'
                                        +'<dl class="days">Calendar Options</dl>'
                                        +'<div style="clear:both;height:0;line-height:0"></div>'
                                        +'<div class="tm">'
                                        +'<ul class="hh">'
                                        +'<li>0</li>'
                                        +'<li>1</li>'
                                        +'<li>2</li>'
                                        +'<li>3</li>'
                                        +'<li>4</li>'
                                        +'<li>5</li>'
                                        +'<li>6</li>'
                                        +'<li>7</li>'
                                        +'<li>8</li>'
                                        +'<li>9</li>'
                                        +'<li>10</li>'
                                        +'<li>11</li>'
                                        +'<li>12</li>'
                                        +'<li>13</li>'
                                        +'<li>14</li>'
                                        +'<li>15</li>'
                                        +'<li>16</li>'
                                        +'<li>17</li>'
                                        +'<li>18</li>'
                                        +'<li>19</li>'
                                        +'<li>20</li>'
                                        +'<li>21</li>'
                                        +'<li>22</li>'
                                        +'<li>23</li>'
                                        +'</ul>'
                                        +'<ul class="mm">'
                                        +'<li>0</li>'
                                        +'<li>5</li>'
                                        +'<li>10</li>'
                                        +'<li>15</li>'
                                        +'<li>20</li>'
                                        +'<li>25</li>'
                                        +'<li>30</li>'
                                        +'<li>35</li>'
                                        +'<li>40</li>'
                                        +'<li>45</li>'
                                        +'<li>50</li>'
                                        +'<li>55</li>'
                                        +'</ul>'
                                        +'<ul class="ss">'
                                        +'<li>0</li>'
                                        +'<li>10</li>'
                                        +'<li>20</li>'
                                        +'<li>30</li>'
                                        +'<li>40</li>'
                                        +'<li>50</li>'
                                        +'</ul>'
                                        +'</div>'
                                        +'</div>'
                                        +'<div class="footCal">'
                                        +'<table class="time">'
                                        +'<tr>'
                                        +'<td>'
                                        +'<input type="text" class="hh" maxlength="2" start="0" end="23"/>:'
                                        +'<input type="text" class="mm" maxlength="2" start="0" end="59"/>:'
                                        +'<input type="text" class="ss" maxlength="2" start="0" end="59"/>'
                                        +'</td>'
                                        +'<td><ul><li class="up">&and;</li><li class="down">&or;</li></ul></td>'
                                        +'</tr>'
                                        +'</table>'
                                        +'<button id="todayBtn" type="button" class="btn">'
                                        + today                                 +'</button>'
                                        +'<button id="clearBtn" type="button" class="btn">'
                                        + clear                                 +'</button>'
                                        +'<button id="okBtn" type="button" class="btn">'
                                        + ok                                    +'</button>'
                                        +'<div>'
                                        +'</div>'
                                        +'</div>';
pending…
join
html = ['<div id="calendar">'
                                        ,'<div class="mainCal">'
                                        ,'<div class="headCal">'
                                        ,'<table width="100%" border="0" cellpadding="0" cellspacing="2">'
                                        ,'<tr>'
                                        ,'<td><div><select name="year" class="year"></select></div><div><table style=\'margin-top:3px\' border="0" cellpadding="0" cellspacing="0"><tr><td id="nextY" class="background-position:-1px -20px">&nbsp;</td></tr><tr><td id="prevY" class="background-position:-1px -40px">&nbsp;</td></tr></table></div></td>'
                                        ,'<td><div><select name="month" class="month"></select></div><div><table style=\'margin-top:4px\' border="0" cellpadding="0" cellspacing="0"><tr><td id="nextM" class="background-position:-1px -20px">&nbsp;</td></tr><tr><td id="prevM">&nbsp;</td></tr></table></div></td>'
                                        ,'<td width="20"><span class="close">&nbsp;</span></td>'
                                        ,'</tr>'
                                        ,'</table>'
                                        ,'</div>'
                                        ,'<div class="bodyCal">'
                                        ,'<dl class="dayNames"><dt>Sun</dt><dt>Mon</dt><dt>Tue</dt><dt>Wed</dt><dt>Tur</dt><dt>Fri</dt><dt>Sat</dt></dl>'
                                        ,'<dl class="days">Calendar Options</dl>'
                                        ,'<div style="clear:both;height:0;line-height:0"></div>'
                                        ,'<div class="tm">'
                                        ,'<ul class="hh">'
                                        ,'<li>0</li>'
                                        ,'<li>1</li>'
                                        ,'<li>2</li>'
                                        ,'<li>3</li>'
                                        ,'<li>4</li>'
                                        ,'<li>5</li>'
                                        ,'<li>6</li>'
                                        ,'<li>7</li>'
                                        ,'<li>8</li>'
                                        ,'<li>9</li>'
                                        ,'<li>10</li>'
                                        ,'<li>11</li>'
                                        ,'<li>12</li>'
                                        ,'<li>13</li>'
                                        ,'<li>14</li>'
                                        ,'<li>15</li>'
                                        ,'<li>16</li>'
                                        ,'<li>17</li>'
                                        ,'<li>18</li>'
                                        ,'<li>19</li>'
                                        ,'<li>20</li>'
                                        ,'<li>21</li>'
                                        ,'<li>22</li>'
                                        ,'<li>23</li>'
                                        ,'</ul>'
                                        ,'<ul class="mm">'
                                        ,'<li>0</li>'
                                        ,'<li>5</li>'
                                        ,'<li>10</li>'
                                        ,'<li>15</li>'
                                        ,'<li>20</li>'
                                        ,'<li>25</li>'
                                        ,'<li>30</li>'
                                        ,'<li>35</li>'
                                        ,'<li>40</li>'
                                        ,'<li>45</li>'
                                        ,'<li>50</li>'
                                        ,'<li>55</li>'
                                        ,'</ul>'
                                        ,'<ul class="ss">'
                                        ,'<li>0</li>'
                                        ,'<li>10</li>'
                                        ,'<li>20</li>'
                                        ,'<li>30</li>'
                                        ,'<li>40</li>'
                                        ,'<li>50</li>'
                                        ,'</ul>'
                                        ,'</div>'
                                        ,'</div>'
                                        ,'<div class="footCal">'
                                        ,'<table class="time">'
                                        ,'<tr>'
                                        ,'<td>'
                                        ,'<input type="text" class="hh" maxlength="2" start="0" end="23"/>:'
                                        ,'<input type="text" class="mm" maxlength="2" start="0" end="59"/>:'
                                        ,'<input type="text" class="ss" maxlength="2" start="0" end="59"/>'
                                        ,'</td>'
                                        ,'<td><ul><li class="up">&and;</li><li class="down">&or;</li></ul></td>'
                                        ,'</tr>'
                                        ,'</table>'
                                        ,'<button id="todayBtn" type="button" class="btn">'
                                        , today
                                        ,'</button>'
                                        ,'<button id="clearBtn" type="button" class="btn">'
                                        , clear
                                        ,'</button>'
                                        ,'<button id="okBtn" type="button" class="btn">'
                                        , ok
                                        ,'</button>'
                                        ,'<div>'
                                        ,'</div>'
                                        ,'</div>'].join("");
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