complex template vs. concat (v9)

Revision 9 of this benchmark created on

Preparation HTML

<div id="memberProfile"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>

<div id="mustacheTemplate">
{{#data}}
  <div class="user" style="overflow:hidden;">
    <h1>{{firstName}} {{lastName}}</h1>
    {{#premium}}
      <b style="float:right;">Premium User!</b>
    {{/premium}}
    <h2>Order History</h2>
    <div class="orders">
      {{#orders}}
        {{number}} {{title}}
        {{#premium}}
          <a href="premiumReturn.html">Return free</a>
        {{/premium}}
        {{^premium}}
          <a href="return.html">Return (you pay shipping)</a>
        {{/premium}}
        <br/>
      {{/orders}}
    </div>
  </div>
{{/data}}
</div>

<script type="text/html" id="tmplUser">
<div class="user" style="overflow:hidden;">
<h1>${firstName} ${lastName}</h1>
{{if premium}}
        <b style="float:right;">Premium User!</b>
{{/if}}
<h2>Order History</h2>
<div class="orders">
{{each orders}}
        ${$value.number}
        ${$value.title}
        {{if premium}}
                <a href="premiumReturn.html">Return free</a>
        {{else}}
                <a href="return.html">Return (you pay shipping)</a>
        {{/if}}
        <br/>
{{/each}}
</div>
</div>
</script>
 
<script>
  var data = [{
   firstName: "Amy",
   lastName: "Apple",
   premium: true,
   userID: 9999000,
   orders: [{
    number: 321,
    title: "Mule Variations"
   },
   {
    number: 543,
    title: "Library Nation"
   }]
  },
  {
   firstName: "Benjamin",
   lastName: "Brown",
   premium: false,
   userID: 9999001,
   orders: [{
    number: 432,
    title: "Hissing Fauna Are You the Destroyer"
   },
   {
    number: 76,
    title: "The Long March"
   }]
  },
  {
   firstName: "Chelsea",
   lastName: "Chesterfield",
   premium: false,
   userID: 9999002,
   orders: [{
    number: 98,
    title: "Myths of the Near Future"
   }]
  },
  {
   firstName: "Daphne",
   lastName: "Dobbins",
   premium: true,
   userID: 9999003,
   orders: [{
    number: 12,
    title: "This is Hardcore"
   },
   {
    number: 765,
    title: "In Rainbows"
   }]
  },
  {
   firstName: "Eddie",
   lastName: "Eastman",
   premium: true,
   userID: 9999004,
   orders: [{
    number: 323,
    title: "Bone Machine"
   }]
  }];
  
  var templateString = document.getElementById("tmplUser").innerHTML;
  $.template("savedTmpl", templateString);
  var templateCompiled = $.template("savedTmpl");
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
use the template
$("#memberProfile").html($("#tmplUser").tmpl(data));
ready
build a string
var markup = "";
for (var user in data) {
 markup += '<div class="user" style="overflow:hidden;"><h1>' + user.firstName + ' ' + user.lastName + '</h1>';
 if (user.premium) markup += '<b style="float:right;">Premium User!</b>';
 markup += '<h2>Order History</h2> <div class="orders">';
 for (var o in user.orders) {
  markup += o.number + ' ' + o.title;
  markup += user.premium ? '<a href="premiumReturn.html">Return free</a>' : '<a href="return.html">Return (you pay shipping)</a>';
  markup += '<br/>';
 }
 markup += '</div></div>';
}
$("#memberProfile").html(markup);
ready
build an array
var markup = new Array();
for (var user in data) {
 markup.push('<div class="user" style="overflow:hidden;"><h1>' + user.firstName + ' ' + user.lastName + '</h1>');
 if (user.premium) markup.push('<b style="float:right;">Premium User!</b>');
 markup.push('<h2>Order History</h2> <div class="orders">');
 for (var o in user.orders) {
  markup.push(o.number + ' ' + o.title);
  markup.push(user.premium ? '<a href="premiumReturn.html">Return free</a>' : '<a href="return.html">Return (you pay shipping)</a>');
  markup.push('<br/>');
 }
 markup.push('</div></div>');
}
$("#memberProfile").html(markup.join(""));
ready
compiled(?) template
$("#memberProfile").html($.tmpl("savedTmpl", data));
ready
html insertion
$('#memberProfile').html('<div class="user" style="overflow:hidden;"> <h1>Amy Apple</h1>   <b style="float:right;">Premium User!</b>  <h2>Order History</h2> <div class="orders">   321  Mule Variations     <a href="premiumReturn.html">Return free</a>    <br>   543  Library Nation     <a href="premiumReturn.html">Return free</a>    <br>  </div> </div><div class="user" style="overflow:hidden;"> <h1>Benjamin Brown</h1>  <h2>Order History</h2> <div class="orders">   432  Hissing Fauna Are You the Destroyer     <a href="return.html">Return (you pay shipping)</a>    <br>   76  The Long March     <a href="return.html">Return (you pay shipping)</a>    <br>  </div> </div><div class="user" style="overflow:hidden;"> <h1>Chelsea Chesterfield</h1>  <h2>Order History</h2> <div class="orders">   98  Myths of the Near Future     <a href="return.html">Return (you pay shipping)</a>    <br>  </div> </div><div class="user" style="overflow:hidden;"> <h1>Daphne Dobbins</h1>   <b style="float:right;">Premium User!</b>  <h2>Order History</h2> <div class="orders">   12  This is Hardcore     <a href="premiumReturn.html">Return free</a>    <br>   765  In Rainbows     <a href="premiumReturn.html">Return free</a>    <br>  </div> </div><div class="user" style="overflow:hidden;"> <h1>Eddie Eastman</h1>   <b style="float:right;">Premium User!</b>  <h2>Order History</h2> <div class="orders">   323  Bone Machine     <a href="premiumReturn.html">Return free</a>    <br>  </div> </div>');
ready
mustache.js
for(var i = 0; i < data.length; i++) {
$("#memberProfile").html($.tmpl("savedTmpl", {data:data[i]}).join(''));
}
ready
jquery compiled v2
for(var i = 0; i < data.length; i++) {
$("#memberProfile").html(templateCompiled($, {data:data[i]}).join(''));
}
ready
jquery compiled v2
$("#memberProfile").html(templateCompiled($, templateData).join(''));
ready

Revisions

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

  • Revision 1: published by garann means on
  • Revision 2: published by garann means on
  • Revision 4: published by garann means on
  • Revision 7: published on
  • Revision 9: published on