templates: TagPlate vs Handlebars

JavaScript performance comparison

Revision 2 of this test case created by tomByrer

Info

  1. Setting template output directly with innerHTML (no variable substitution).
  2. TagPlate transpilation against a pre-loaded "shadow" DOM in a pre-fetched element
  3. TagPlate transpilation against a "shadow" DOM loaded set with innerHTML during test time
  4. A precompiled Handlebars template applied to a pre-fetched DOM element with innerHTML v2: removed unneeded? jQuery, localhost, updated Handlebars to 1.3.0

Preparation code

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://charger.chasehosting.com/~lazdnet/TagPlate.js"></script>
<script>
// Handlebars setup
var hbsTemplate = Handlebars.compile('{{{toolbar}}}<div>Name: {{name}}</div>');
Handlebars.registerHelper('toolbar', function() {
  return '<div class="toolbar">A Toolbar</div>';
});

// TagPlate setup
TagPlate.registerDirective('toolbar', function(node, obj) {
  return '<div class="toolbar">A Toolbar</div>';
});
</script>

<div id="innerHTMLTarget"></div>
<div id="hbsTarget"></div>
<div id="tagPlateTarget1"></div>
<div id="tagPlateTarget2"></div>
<script>
Benchmark.prototype.setup = function() {
    window.innerHTMLTarget = document.getElementById('innerHTMLTarget');
    window.innerHTMLTarget.innerHTML = '';
   
    window.hbsTarget = document.getElementById('hbsTarget');
    window.hbsTarget.innerHTML = '';
   
    window.tagPlateTarget1 = document.getElementById('tagPlateTarget1');
    window.tagPlateTarget1.innerHTML = '<div><toolbar></toolbar>Name: <v>name</v></div>';
   
    window.tagPlateTarget2 = document.getElementById('tagPlateTarget2');
    window.tagPlateTarget2.innerHTML = '';
   
    window.tagPlateTarget3 = document.createElement('div');
};
</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
Direct innerHTML
window.innerHTMLTarget.innerHTML = '<div><div class="toolbar">A Toolbar</div>Name: Test</div>';
pending…
HB
window.hbsTarget.innerHTML = hbsTemplate({ name: 'Test' });
 
pending…
TP: Preloaded DOM
TagPlate.transpile(window.tagPlateTarget1, { name: 'Test' });
pending…
TP: Dynamic DOM with innerHTML
window.tagPlateTarget2.innerHTML = '<div><toolbar></toolbar>Name: <v>name</v></div>';
TagPlate.transpile(window.tagPlateTarget2, { name: 'Test' });
pending…
TP: innerHTML with div outside of DOM
window.tagPlateTarget3.innerHTML = '<div><toolbar></toolbar>Name: <v>name</v></div>';
TagPlate.transpile(window.tagPlateTarget3, { name: 'Test' });
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