DOM vs innerHTML based Templating

JavaScript performance comparison

Revision 493 of this test case created by tom

Info

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

Preparation code

<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://raw.github.com/olado/doT/master/doU.js"></script>

<script src="https://raw.github.com/olado/doT/master/doT.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'
  };
 
  window.doTtemplate = doT.template("<div><h1 class='header'>{{= it.header }}</h1><div class='a'>{{= it.a }}</div><div class='b'>{{= it.b }}</div><div class='c'>{{= it.c }}</div><div class='d'>{{= it.d}}</div><div='e'>{{= it.e }}</div><div class='f'>{{= it.f }}</div></div>");
 
  window.doUtemplate = doU.template("<div><h1 class='header'>{{= it.header }}</h1><div class='a'>{{= it.a }}</div><div class='b'>{{= it.b }}</h3><div class='c'>{{= it.c }}</div><div class='d'>{{= it.d }}</div><div class='e'>{{= it.e }}</div><div class='f'>{{= it.f }}</div></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
Mustache.js Template
Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
Pure JS Template
$('.purejs_template').autoRender(sharedVariables);
pending…
Underscore.js Template
underscoreTemplate(sharedVariables);
pending…
doT.js Template
doTtemplate(sharedVariables);
pending…
doU.js Template
doUtemplate(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:

0 comments

Add a comment