DOM vs innerHTML based Templating

JavaScript performance comparison

Revision 828 of this test case created


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

Preparation code

<script src=""></script>

<script src=""></script>

<script src=""></script>

<script src=""></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>

  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.glassesTemplate = '<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.Glasses = function(model, template) {
  var _lr, _render, _rr, _string;
  if (!window.glassesTemplateFunction) {
    _lr = /{{/g;
    _rr = /}}/g;
    _string = template.replace(_lr, "'+model.").replace(_rr, "+'");
    _render = Function.apply(null, ['model', "return '" + _string + "'"]);
    window.glassesTemplateFunction = _render;
  } else {
    _render = window.glassesTemplateFunction;
  return _render(model);


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);
Pure JS Template
Underscore.js Template
pending… Template
Glasses(sharedVariables, glassesTemplate);

Compare results of other browsers


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:


Comment form temporarily disabled.

Add a comment