Lodash vs Handlebars

Benchmark created by Nate Cavanaugh on

Preparation HTML

<div id="target"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

<script>
window.handlebarsTemplate = Handlebars.compile("<div>{{template}}<h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#list}}<li class='item'>{{this}}</li>{{/list}}</ul></div>");

window.lodashTemplate = _.template("<div><%=template%><h1 class='header'><%=header%></h1><h2 class='header2'><%=header2%></h2><h3 class='header3'><%=header3%></h3><h4 class='header4'><%=header4%></h4><h5 class='header5'><%=header5%></h5><h6 class='header6'><%=header6%></h6><ul class='list'><%for(var i in list){%><li class='item'><%=list[i]%></li><% } %></ul></div>");
</script>

Setup

window.sharedVariables = {
      header: "Header",
      header2: "Header2",
      header3: "Header3",
      header4: "Header4",
      header5: "Header5",
      header6: "Header6",
      list: ['10000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    };

Teardown



            $("#target").html('');

Test runner

Ready to run.

Testing in
TestOps/sec
Handlebars
sharedVariables.template = 'Handlebars.js';
$("#target").html(handlebarsTemplate(sharedVariables));
++sharedVariables.list[0];
ready
Lodash
sharedVariables.template = 'lodash.js';
$("#target").html(window.lodashTemplate(sharedVariables));
++sharedVariables.list[0];
ready

Revisions

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