DOM vs innerHTML based Templating (v483)

Revision 483 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>
<div id="target">
</div>
<script>
  window.underscoreTemplate = _.template("<div><h1 class='header'><%= data.header %></h1><div class='a'><%= data.a %></div><div class='b'><%= data.b %><div class='c'><%= data.c %><div class='d'><%= data.d %><div class='e'><%= data.e %><div class='f'><%= data.f %></div></div></div></div></div></div>", null, {
    variable: 'data'
  });

  var 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>";

  var pureJsTemplate = "<div class='purejs_template'><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>";

  var sharedVariables = {
    header: "Header",
    a: 'aaa',
    b: 'bbb',
    c: 'ccc',
    d: 'ddd',
    e: 'eee',
    f: 'fff'
  };

  var target = document.getElementById("target");
</script>

Setup

var domTemplate = function(target) {
    
        var template = document.createElement('div');
        var header = document.createElement('h1');
        header.className = 'header';
        header.textContent = sharedVariables.header;
        var a = document.createElement('div');
        a.className = 'a';
        a.textContent = sharedVariables.a;
        var b = document.createElement('div');
        b.className = 'b';
        b.textContent = sharedVariables.b;
        var c = document.createElement('div');
        c.className = 'c';
        c.textContent = sharedVariables.c;
        var d = document.createElement('div');
        d.className = 'd';
        d.textContent = sharedVariables.d;
        var e = document.createElement('div');
        e.className = 'e';
        e.textContent = sharedVariables.e;
        var f = document.createElement('div');
        f.className = 'f';
        f.textContent = sharedVariables.f;
    
        template.appendChild(header);
        template.appendChild(a);
        a.appendChild(b);
        b.appendChild(c);
        c.appendChild(d);
        d.appendChild(e);
        e.appendChild(f);
    
        while (target.firstChild) {
          target.removeChild(target.firstChild);
        }
    
        target.appendChild(template);
    
    
        }

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js Template
target.innerHTML = Mustache.to_html(mustacheTemplate, sharedVariables);
ready
Pure JS Template
target.innerHTML = pureJsTemplate;
$('.purejs_template').autoRender(sharedVariables);
ready
Underscore.js Template
target.innerHTML = underscoreTemplate(sharedVariables);
ready
DOM Manipulation
domTemplate(target)
ready

Revisions

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