concat vs + vs join (v11)

Revision 11 of this benchmark created on

Setup

var html = "",today="today",clear="clear",ok="ok";

Test runner

Ready to run.

Testing in
TestOps/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>'
							           );
ready
+
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>';
ready
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("");
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.