appendToJQueryTmpl

JavaScript performance comparison

Test case created

Preparation code

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

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

<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);
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
string concat
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);
pending…
jquery tmpl
$("#tmplUser").render(data).appendTo("#memberProfile");
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