Handlebars Compile, Compile+Cache, Precompile, Precompile+Cache (v13)

Revision 13 of this benchmark created on October 24, 2015

Preparation HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>

<script id="template" type="text/plain">
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>
 <div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
  {{#each items}}
    <div>{{text}}</div>
  {{/each}}
 </div>

</script>

<script>
var source = $("#template").html();
var compiled = Handlebars.compile(source);
var precompiled;
eval('precompiled = '+Handlebars.precompile(source));
var precompiledCached = Handlebars.template(precompiled);

var testData = {
  title: 'handlebars',
  body: 'test',
  items: [
    { text: 'test1' },
    { text: 'test2' },
    { text: 'test3' },
    { text: 'test4' }
  ]
};

function testCompile() {
  var fn = Handlebars.compile(source);
  fn(testData);
}

function testCompileAndCache() {
  compiled(testData);
}

function testPrecompile() {
  var fn = Handlebars.template(precompiled);
  fn(testData);
}

function testPrecompileAndCache() {
  precompiledCached(testData);
}
</script>

Test runner

testCompile();

testCompileAndCache();

testPrecompile();

testPrecompileAndCache();

Revisions

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

• Revision 1: published by Carl Lewis on June 15, 2012
• Revision 3: published on October 19, 2012
• Revision 4: published on October 27, 2012
• Revision 5: published on April 8, 2013
• Revision 6: published on August 2, 2013
• Revision 7: published by Samuel on October 24, 2013
• Revision 8: published on December 11, 2013
• Revision 9: published on April 30, 2014
• Revision 10: published on July 21, 2014
• Revision 12: published by Matt on May 12, 2015
• Revision 13: published on October 24, 2015