Hogan.js vs. Mustache (v16)

Revision 16 of this benchmark created on

Preparation HTML

<div id ="result">
</div>
<script id="demo" type="text/template">
                <p>{{title}}</p>
                <ul>
                    {{#items}}
                    <li>
                        {{title}}
                    </li>
                    {{/items}}
                </ul>
        </script>


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js" type="text/javascript"></script>

<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script>

Setup

var context = {
      title: "Title - example 1",
      link: "/",
      description: "JavaScript -  Title - example 1",
      language: "en",
      items: [{
        title: "Sub title 1",
        link: "/",
        description: "Decription - sub title 1 - Decription - sub title 1 - Decription - sub title 1 - Decription - sub title 1- Decription - sub title 1 "
      }, {
        title: "Sub title 2",
        link: "/",
        description: "Decription - sub title 2 - Decription - sub title 2 - Decription - sub title 2 - Decription - sub title 2- Decription - sub title 2 "
      }, {
        title: "Sub title 3",
        link: "/",
        description: "Decription - sub title 3 - Decription - sub title 3 - Decription - sub title 3 - Decription - sub title 3- Decription - sub title 3 "
      }]
    
    };
    
    var tpl = document.getElementById('template').value;

Test runner

Ready to run.

Testing in
TestOps/sec
Rendering with Mustache
var template = document.getElementById("demo").innerHTML;
var html = Mustache.to_html(template, data);
document.getElementById("result").innerHTML = html;
ready
Rendering with Hogan.js (uncompiled)
// async test
var str_template = document.getElementById("demo").innerHTML;
var template = Hogan.compile(str_template);
var html = template.render(data);
document.getElementById("result").innerHTML = html;
ready

Revisions

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