Transparency vs. Weld vs. Mustache

JavaScript performance comparison

Revision 6 of this test case created by Jarno Keskikangas

Preparation code

<script src="https://github.com/downloads/paul/handlebars.js/handlebars.js"></script>
<script src=http://code.jquery.com/jquery-1.7.1.min.js></script>
<script src="http://leonidas.github.com/transparency/js/transparency.min.js"></script>

<div id="transparency">
  <h1 id="name">My Name</h1>
  <ul class="interests"><li class="interest">An interest</li></ul>
</div>

<div id="handlebars">
   <h1>{{name}}</h1>
   <ul>
   {{#interests}}
     <li>{{interest}}</li>
   {{/interests}}
   </ul>
</div>
 
<script>
  Benchmark.prototype.setup = function() {
    var me = {
      "name": "Joshua Kehn",
      "interests" : [
        "javascript",
        "node.js",
        "development",
        "programming"
      ]
    };
    
    var transparencyTemplate = document.getElementById('transparency');
    var handlebarsOutput     = document.getElementById('handlebars');
    var handlebarsTemplate   = Handlebars.compile(handlebarsOutput.innerHTML);
  };
</script>

Preparation code output

My Name

  • An interest

{{name}}

    {{#interests}}
  • {{interest}}
    • {{/interests}}

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Transparency
 
Transparency.render(transparencyTemplate, me);
 pending…
Handlebars
 
handlebarsOutput.innerHTML = handlebarsTemplate(me);
 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