DOM vs innerHTML based Templating

JavaScript performance comparison

Revision 327 of this test case created

Info

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

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script>
<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>


<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.underscoreTemplate = _.template("<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.sharedVariables = {
   header: "Header",
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff'
  };
</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
Mustache.js Template
Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
Pure JS Template
$('.purejs_template').autoRender(sharedVariables);
pending…
Underscore.js Template
underscoreTemplate(sharedVariables);
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:

2 comments

Mic commented :

You are using the autoRender of pure.js which is very slow, as it parse the HTML to find the classes, and compile the template every time. While underscore seems already compiled.

Again these tests are relevant if you do server rendering. If you plan to use a templating engines on the browser, there is no value in being 100ms instead of 500ms to run all the transformation.

pure.js is about have the HTML clean, and is fast enough for the heaviest client rendering.

Mic commented :

If you target browser rendering, there is another bias. You compare template engines that output strings, and DOM.

This test doesn't take into account the insertion of the HTML string in the DOM.

Add a comment