adaddsaring Concatenation (v2)

Revision 2 of this benchmark created by sdfmarek on

Setup

var precalculatedIso = (new Date()).toISOString();

Test runner

Ready to run.

Testing in
TestOps/sec
ES6 with variable
var test = `<body>
  <article>
    <time datetime='${ precalculatedIso }'>${ precalculatedIso }</time>
  </article>
</body>`;
ready
String concatenation with variable
var test = "<body>"+
  "<article>"+
    "<time datetime='" + precalculatedIso +"'>"+ precalculatedIso +"</time>"+
  "</article>"+
"</body>";
ready
ES6 with function
var test = `<body>
  <article>
    <time datetime='${ (new Date()).toISOString() }'>${ (new Date()).toISOString() }</time>
  </article>
</body>`;
ready
String concatenation with function
var test = "<body>"+
  "<article>"+
    "<time datetime='" + (new Date()).toISOString() +"'>"+ (new Date()).toISOString() +"</time>"+
  "</article>"+
"</body>";
ready
html
var elements='';
var class_hidden=''; 
var i,j;
for(j=0;j<3;j++){
if(j==1){class_hidden='hidden';}
elements+=("<div id='t"+(j+1)+"' class='timer "+class_hidden+"'>");
elements+=("<div class='day'>");
elements+=("<span class='dayafter'>"+j+"</span>");
elements+=("<span class='menu_btn'><img src='' ></span>");
elements+=("</div>");
elements+=("<span class='dateColor'>"+j+" "+j+"</span>");
elements+=("<ul>");
for(i=0;i<48;i++) {                               
elements+=("<li class='hour' id='"+j+"_"+i+"'>");
elements+=("<span>"+j+i+'.'+i+j+"</span>");
elements+=("<div class='input_box'>");
elements+=("<input class='book_button' data-slot-number='"+i+"' data-day='"+j+"' data-status='i' type='text' readonly='readonly' date-name='phone_number' value='i'>");
elements+=("</div>");
elements+=("<div class='phones'></div>");
elements+=("</li>");
}
elements+=("</ul>");
elements+=("</div>");
}
document.body.insertAdjacentHTML('beforeend',elements);
ready
html12
var elements='';
var class_hidden=''; 
var i,j;
for(j=0;j<3;j++){
if(j==1){class_hidden='hidden';}
elements+=("<div id='t"+(j+1)+"' class='timer "+class_hidden+"'>"+
"<div class='day'>"+
"<span class='dayafter'>"+j+"</span>"+
"<span class='menu_btn'><img src='' ></span>"+
"</div>"+
"<span class='dateColor'>"+j+" "+j+"</span>"+
"<ul>";
for(i=0;i<48;i++) {                               
elements+="<li class='hour' id='"+j+"_"+i+"'>"+
"<span>"+j+i+'.'+i+j+"</span>"+
"<div class='input_box'>"+
"<input class='book_button' data-slot-number='"+i+"' data-day='"+j+"' data-status='i' type='text' readonly='readonly' value='i'>"+
"</div>"+
"<div class='phones'></div>"+
"</li>";
}
elements+="</ul>"+
"</div>";
}
document.body.insertAdjacentHTML('beforeend',elements);
ready

Revisions

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