DOM vs innerHTML based Templating (v812)

Revision 812 of this benchmark created on

Description

A brief comparison of some JavaScript templating engines on a short template: 7 DOM nodes ... 7 interpolated values.

Preparation HTML

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

<script src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js"></script>

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>

<script src="http://mustache.github.com/extras/mustache.js"></script>
<script src="https://egych.amocrm.ru/frontend/js/vendor/twig.js"></script>
<script src="http://akdubya.github.io/dustjs/lib/dust.js"></script>
<script src="http://akdubya.github.io/dustjs/lib/parser.js"></script>
<script src="http://akdubya.github.io/dustjs/lib/compiler.js"></script>

<div class="purejs_template"><div><h1 class="header"></h1><div class='a'></div><div class='b'><div class='c'><div class='d'><div class='e'><div class='f'></div></div></div></div></div></div></div>

<script>
  window.mustacheTemplate = "<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}<div class='c'>{{c}}<div class='d'>{{d}}<div class='e'>{{e}}<div class='f'>{{f}}</div></div></div></div></div></div>";
  
  window.dustTemplate = dust.compile("<div><h1 class='header'>{header}</h1><div class='a'>{a}</div><div class='b'>{b}<div class='c'>{c}<div class='d'>{d}<div class='e'>{e}<div class='f'>{f}</div></div></div></div></div></div>", 'dust_template');

  window.twigTemplate = twig({id:"twig_template", data:[{"type":"raw","value":"<div><h1 class='header'>"},{"type":"output","stack":[{"type":"Twig.expression.type.variable","value":"header","match":["header"]}]},{"type":"raw","value":"</h1><div class='a'>"},{"type":"output","stack":[{"type":"Twig.expression.type.variable","value":"a","match":["a"]}]},{"type":"raw","value":"</div><div class='b'>"},{"type":"output","stack":[{"type":"Twig.expression.type.variable","value":"b","match":["b"]}]},{"type":"raw","value":"<div class='c'>"},{"type":"output","stack":[{"type":"Twig.expression.type.variable","value":"c","match":["c"]}]},{"type":"raw","value":"<div class='d'>"},{"type":"output","stack":[{"type":"Twig.expression.type.variable","value":"d","match":["d"]}]},{"type":"raw","value":"<div class='e'>"},{"type":"output","stack":[{"type":"Twig.expression.type.variable","value":"e","match":["e"]}]},{"type":"raw","value":"<div class='f'>"},{"type":"output","stack":[{"type":"Twig.expression.type.variable","value":"f","match":["f"]}]},{"type":"raw","value":"</div></div></div></div></div></div>\n"}], precompiled: true});

  window.sharedVariables = {
   header: "Header",
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff'
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js Template
Mustache.to_html(mustacheTemplate, sharedVariables);
ready
Pure JS Template
$('.purejs_template').autoRender(sharedVariables);
ready
Dust.js Template
dust.render("dust_template", sharedVariables, function () {});
ready
Twig.js Template
twigTemplate.render(sharedVariables);
ready

Revisions

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